Когда вы пишете много кода CSS, вы можете испытать более одной ошибки. Некоторый инструмент может понадобиться, чтобы предотвратить написание ошибок CSS.
Может быть, иногда ваша ошибка действительно ошибка. Также возможно, что несоответствия или неясные стили кода вызваны просто поспешными. Возможно, многие из них кажутся тривиальными (в зависимости от вашей личности), но по мере роста базы кода и накапливается время, многие люди будут делать уродливые вещи при их использования. Последствия вещей - это не то, что вы можете себе представить.
Вы пытаетесь контролировать себя. Ваши коллеги также помогают вам своевременно исправлять свои ошибки. Тем не менее, вы и ваши коллеги оба являются производителем ошибок, поэтому, в конце концов, они неизбежно сбои, по крайней мере, в определенной степени. Позже вы или другие решите проблему, вызванную ошибками CSS на вашей странице.
Ни вы, ни ваши коллеги не любят обсуждать ошибки, которые вы допустили, потому что это смущает. Это может быть даже разочаровывающим или эмоционально разорванным время от времени. Определенная спецификация иногда полезна для поддержания базы кода, например, последовательный стиль письма, который может показаться немного педантичным и скучным при выполнении вручную. В противном случае они покажут элементы вашей обычной любви, чтобы показаться и упрямства.
Кроме того, вы можете своевременно исправлять ошибки вместо того, чтобы ждать просмотра кода, а другие указывают на ошибки, изменяйте их самостоятельно и заявите, что у вас снова не будет таких ошибок. Когда возникает ошибка CSS, своевременная обратная связь поможет вам сэкономить много времени.
Вам нужна машина, которая предотвращает ошибки
Вам нужна машина, которая предотвращает возникновение ошибок, может понять CSS и понять вас: ваши намерения, предпочтения, идеи и слабости.
Такие машины будут иметь ограничения. Все не идеально. Но это ограничение отличается от вас и ваших коллег. Пока это может предотвратить ошибки, это будет продолжать предотвратить их, работая рук. В то же время вы и ваши коллеги всегда можете улучшить машину, расширить его функциональность и ослабить его ограничения. Это открытый исходный код, и люди со всего мира могут присоединиться к и внести свой вклад-других авторов, которые хотят остановить себя от ошибок в CSS.
Как и другие, авторам CSS нуждаются в линтерах
Мы называем эти программы, которые предотвращают ошибки «Линтеры». В JavaScript есть несколько лучших рынков. В частности, он чудесным образом работает, показывая нам, что хороший линтер так полезен. Но в CSS нам не очень повезло, наш выбор очень ограничен: SCSS-Lint на основе Ruby со специальными препроцессорами и более ранним CSS Lint.
Но все это было до того, как появились PostCSS. Кроме того, PostCSS предоставляет некоторые методы для создания более интерактивных инструментов CSS. Он может анализировать любой синтаксис класса CSS в плагин абстрактного синтаксиса (AST) для анализа и работы. И с помощью пользовательского анализатора, PostCSS может даже обрабатывать неверные неверные паттерны (например, // комментарии)
Условия зрелости уже могут создавать линтер с более мощными функциями-приводимыми в действие PostCSS и вдохновляемые лучшими функциями SCSS-Lint и Eslint.
Я работал с несколькими друзьями над этим проектом, и теперь я начну представлять разработанные нами инструменты: StyleLint.
Вещи, которые вы можете сделать со StyleLint
Ниже приводится краткое изложение функций, пробованных в StyleLint, с более чем 100 правилами и масштабируемостью.
На данный момент, если вы обнаружите, что станете немного нетерпеливым («ОК, ОК: я считаю, что StyleLint будет иметь чудесные рабочие эффекты. Не нужно слишком много сводки».). Просто перейдите к следующему разделу, здесь я просто объясняю некоторые проблемы и даю несколько советов.
Захват ошибок
Некоторые правила стилей предназначены для выявления очевидных ошибок, таких как ошибки орфографии или упущения, созданные вашими расстроенными или мутными глазами. Например, вы можете отключить пустые блоки, неверные шестнадцатеричные значения, дублирующие селекторы, неназванные имена анимации и неверный синтаксис линейного градиента.
Другие правила - стараться изо всех сил, чтобы поймать более тонкие ошибки. Вот правило: когда вы используете сокращенные свойства (такие как margin ), которые могут переопределить их сверстники (например margin-top ), будет выпущено предупреждение, потому что это может быть вызвано вашей халатностью. Кроме того, существует еще одно правило, которое предупреждает вас: когда происходит хаос, если правило A появляется перед правилом B, но фактически охватывает правило B, потому что селектор правила A имеет более высокий приоритет (например, правило A .foo.bar{・・・} , а правило B - .foo{・・・} ). Это очень сложная ситуация.
Существует также правило, которое использует плагин PostCSS Doiuse, чтобы проверить, поддерживает ли ваш браузер этот стиль. Другой использует плагин CSS-Colorguard, чтобы призвать сходство с цветом, чтобы не смутить ваше использование. (Обратите внимание: это одно из основных преимуществ StyleLelint на основе PostCSS: по сравнению с другими плагинами PostCSS, StyleLint может приправить с небольшим усилием.)
Применять лучшие практики
Если вы используете системные методы в своих таблицах стилей или имеете руководство по стилю для вашего кода, вы должны запретить эти шаблоны. StyleLint уже предоставляет эти функции.
Во -первых, вам нужно усердно контролировать свой селектор. С помощью StyleLint вы можете отключить селекторы, которые превышают определенную специфичность или устанавливают ограничения на глубину гнездования. Вы можете отключить селекторы категорий (например, селекторы без идентификаторов) и использовать регулярные выражения для соглашений об именах для остальных.
Вы можете запретить использование !important или браузерные взломы, которые ваш браузер не поддерживает. Если вы используете AutoPrefixer (или вы должны), вы можете отключить использование префиксов поставщика в таблице стиля исходного стиля.
Если вы хотите быть более строгим - вы можете потратить некоторое время на конфигурацию, чтобы обеспечить абсолютную согласованность - вы можете обеспечить соблюдение порядка свойств стиля и обеспечить свойства, значения, функции и единицы для черных списков и белых списков.
Выполнить конвенции в стиле кода
У StyleLint есть соглашения для автоматического выполнения стилей кода, поэтому вам и вашим товарищам по команде не нужно активно его настраивать. Мы стремимся сделать эти правила более полными и гибкими.
Эти правила в основном предназначены для пространств, а также для других деталей, таких как кавычки, буквы верхнего и нижнего регистра, написание нулей перед десятичными дроби, использование ключевых слов, изписание значений и т. Д.
Мечтаете о том, что вы и ваши товарищи по команде можете установить конвенцию о формате (например, мы всегда оставляем место после объявления толстой кишки) и изменить его в вашей конфигурации стилей, и вы больше не будете обсуждать его после этого. Пусть он будет выполнен в машинном королевстве.
Разработайте и расширяйте все
Николас Закас, создатель Eslint (и CSS Lint), написал об успехе Eslint заключается в его масштабируемости. StyleLint пытается следовать лидерству Eslint и предоставляет авторам CSS с помощью Linter, который также расширяется.
Вы можете написать и опубликовать свой собственный плагин правил. Теперь у нас есть много вещей, которые можно использовать; И мы стремимся увидеть отличные плагины других людей.
Конфигурация расширяется и, следовательно, может быть передана. Что касается плагинов, мы узнали о значении этой функции от Eslint. Проверка, которая включает в себя конфигурации WordPress и Suitcss и были опубликованы.
Если вам не нравятся встроенные советы StyleLint, вы можете создать свой собственный стиль вручную или даже создать его для своей организации. Вы также можете настроить правила, используемые для предоставления предупреждающих сообщений.
Используя API StyleLint, вы можете создавать плагины для текстовых компиляторов и выполнять тесты, чтобы сделать StyleLint включать в каждый аспект вашего рабочего процесса.
Если у вас есть идеи о расширениях StyleLint, пожалуйста, сообщите нам об этом!
Ответы на ожидаемые вопросы
В вашем уме может быть несколько вопросов. Вот несколько наиболее распространенных объяснений:
Можно ли использовать StyleLint в SCSS или меньше?
Ответ - да, вы можете использовать StyleLint в SCSS, и он также поддерживается меньше! Поскольку PostCSS позволяет пользовательским анализаторам, StyleLint может легко поддерживать широкий спектр нестандартных синтаксисов - вы можете настроить анализатор PostCSS для анализа.
Из-за PostCSS Parser-StyleLint поддерживает SCSS, меньше и новый сахар. Если вы хотите внедрить еще одну пользовательскую поддержку синтаксиса, вы можете сделать это с Postless!
Конечно, существуют определенные правила, которые связаны с вашим нестандартным синтаксисом (например #{$interpolation} в селекторе идентификатора SASS). Поскольку StyleLint пытается скрыть стиль наших таблиц стилей - некоторые люди используют стандартные CSS, некоторые люди используют расширенные языки, такие как SCSS, некоторые люди используют странные пользовательские свойства и т. Д. - они неизбежно создадут некоторые уязвимости, которые необходимо заполнить. Тем не менее, мы имели дело с этими ошибками, которые мы нашли; Любые правила в течение этого периода могут быть полностью закрыты или отключены в рамках таблицы стилей в ряду или в стиле ряда.
Способен ли StyleLint использовать будущий синтаксис CSS?
Да! Подобно ответу, упомянутому выше: StyleLint может понять все, что понимает PostCSS, включая включение любого будущего синтаксиса CSS (вероятно, через плагин PostCSS). На самом деле, некоторые правила стилей, специально связанные с будущим синтаксисом CSS и некоторыми пользовательскими свойствами.
Конфигурация StyleLint огромна, с чего мне начать?
Мы рекомендуем три метода конфигурации:
Расширить опубликованную конфигурацию. Мы поддерживаем стандарты StyleLelint-Configuration, чтобы облегчить пользователю предоставление внутреннего эталона. И многие конфигурации были объявлены. Начните с нуля и добавляйте по одному правилу за раз. По умолчанию ни одно правило не включено, поэтому, добавив правила вручную, вы узнаете, какой из них будет применен, и вы можете понять каждое правило, которое вы добавите. Начните конфигурацию копирования вставки, решите, какие параметры использовать и выборочно удалить.
К счастью, вам не нужно писать огромную конфигурацию StyleLint снова и снова. Вы можете выбрать стиль, который вам нравится, и вы можете использовать его где угодно.
Самый простой способ запустить StyleLint?
Для большинства людей самый простой способ - это командная строка.
Если вы предпочитаете плагин Gulp, вы можете использовать Gulp-Stylelint. Для WebPack есть много возможностей для выбора. Мы надеемся, что эти плагины вдохновит вас на создание других плагинов StyleLint, например, для Grunt. (Вы можете искать в проектах с открытым исходным кодом!)
Вы также можете запустить StyleLint, используя плагин PostCSS, включая все, что включено в плагин. Это означает, что вы можете использовать StyleLelint везде, где вы можете использовать PostCSS (который охватывает почти каждый инструмент компиляции)!
Кроме того, существует также плагин с компиляцией текста StyleLelint для атома, превосходного текста, против кода, чтобы обеспечить самую быструю обратную связь. Для получения дополнительной информации, пожалуйста, обратитесь к списку дополнительных инструментов на веб -сайте StyleLint.
Как показано ниже, в командной строке результаты, которые вы ожидаете увидеть:
Покажите следующее в Atom;
Может ли StyleLint исправить мою ошибку?
Нет, но еще один под названием StyleFMT предназначен для этого. Это требует конфигурации StyleLelint - очень похоже на то, что вы используете в Linting - и может исправить любые ошибки. Мы надеемся, что с учетом вклада сотрудников сообщества StyleLint может развиваться, чтобы автоматически исправлять ошибки, которые нарушают правила StyleLint. Пожалуйста, помогите им достичь этой цели!
Вы также можете использовать другие инструменты, такие как CSSComb или PerfectList, используемые в сочетании с StyleLint для автоматического исправления и автоматического закрепления отдыха.
Используйте лининг для дополнения ограничения
В хорошем CSS существует огромное количество ограничений. Вот почему мы проводим много времени, обсуждая такие методы, как SMACS, ACS, BEM, Suffss, ITCS и т. Д. Мы все знаем, что написание плохого CSS очень просто, поэтому, если мы больше не боимся написания в стиле CSS, нам нужно создать интеллектуальную стратегию на работе и исцелеть ее.
Цель StyleLint - автоматизировать выполнение - предоставление набора основных правил и платформу, которую авторы CSS могут использовать для выполнения своих собственных стратегий.
Давайте попробуем и сообщим нам, как вам служить. Если у вас есть лучшие идеи улучшения, такие как правила вклада, улучшения, тестирование, исправление ошибок, файлы, новые идеи или просто отзывы, пожалуйста, дайте нам сообщение! Таким образом, все наши разработчики на всех уровнях имеют работу.