Лінтінг файлів стилів. Так мало людей роблять це. Однак, набагато більше людей повинні перевіряти файли стилів, особливо в різношерстих командах, де багато людей правлять код.
У цій статті я буду говорити про те, навіщо ми повинні лінту наші файли стилів, і як лінту файли таблиць стилів в процесі нашої збірки, як для чистого CSS, та й для Sass.
вступ
Що таке лінтінг?
Чому ми повинні лінтовать наші CSS?
Є багато причин лінту файли стилів. Лінтінг підтримує однаковість коду, показує помилки в кодової базі, допомагає прибрати непотрібний код, а також допомагає уникнути небезпек через лінь програмістів.
Давайте розглянемо кілька прикладів.
Лінтера дуже гарні для відлову стилістичних помилок, які ви побачили в коді вище. Хоча стилістичні правила і не головне в Лінтера, вони допомагають підтримувати код однорідним. Крім того, не знаю як у вас, але дві помилки показані вище, є моїм слабким місцем.
Вони так само хороші в вилові описок (помилок), як в прикладі з неправильним кольором. Помилки такого типу можуть зламати зовнішній вигляд сторінки, якщо не будуть виловлені.
Сьогодні більшості CSS3-властивостей більше не потрібні префікси. Лінтінг дозволяє знайти непотрібні префікси і очистити застарілий код. Лінтінг префіксів особливо корисний в парі з Autoprefixer - він дозволить вам прибрати всі префікси з вихідного коду і додати потрібні, в залежності від налаштувань Autoprefixer, враховуючи вашу аудиторію.
Повторення властивостей часто приховує серйозні помилки. Що якщо розробник хотів перехід для обох властивостей opacity і background-color. В цьому випадку ефект переходу для opacity буде втрачено. Лінтінг покаже цю помилку.
Досить переконливо? Якщо немає, то продовжуйте читання.
представляємо Stylelint
Stylelint потужний, сучасний CSS Линтер, який допоможе вам забезпечити дотримання єдність стилю коду і уникнути помилок в ваших таблицях стилів.
Линтер розроблений на базі PostCSS. так що він розуміє будь-який синтаксис, який може розпарсити PostCSS, включаючи SCSS (і Less, прим. перекладача).
PostCSS є інструментом для перетворення стилів за допомогою плагінів на JS. Ці плагіни можуть перевіряти ваш CSS, додавати в мову змінні і домішки, поліфілії чернетки специфікація CSS, вбудовувати зображення через base64.
PostCSS і Stylelint - це те, що ми будемо використовувати, щоб лінту наші стилі в наступному розділі.
Файли Stylelint
Краса Stylelint в тому, що він не нав'язує вам один стиль. Ви створюєте свої набори правил з нуля, так що він може бути настільки зарозумілим і впертим, наскільки ви захочете. Вам не доведеться витрачати час на відключення непотрібних правил, щоб почати роботу.
Документація правил Stylelint є гарною відправною точкою. Так само вам доступні стандартні настройки Stylelint. які досить добре продумані, щоб використовувати їх для ваших проектів.
Ми почнемо з невеликого файлу, щоб покрити найважливіше. Особисто я вважаю, що мати чистий файл, краще, ніж перевизначати стандартний файл налаштувань від команди Stylelint - краще додавати, що вам потрібно, а не відключати зайве.
Він виглядає так:
Я рекомендую уважно вивчити опис правил Stylelint і доопрацювати його, створивши ваш ідеальний конфиг для Лінтера. Тепер давайте налаштуємо нашу збірку, використовуючи ці правила.
Як лінтовать ваш CSS
Давайте почнемо з лінтінга чистого CSS. Ви будете здивовані як легко його налаштувати! Інструменти, які вам потрібно встановити: gulp-postcss. postcss-reporter. і stylelint. Давайте зробимо це.
І ось файл для Gulp, щоб зібрати все це разом:
Чи складно це було? Я написав 50 рядків коду, включаючи прищепила Лінтера і обсяги імпорту. До речі, переконайтеся, що ви змінили шляху розташування початкових кодів, згідно з вашим проектом!
А ще крутіше те, що вам потрібно змінити тільки один рядок, щоб включити підтримку SCSS. Давайте зробимо це зараз ...
Як лінтовать ваш Sass
Лінтовать файли SCSS супер-просто з PostCSS. Єдина відмінність між лінтінгом CSS і SCSS в тому, що вам потрібно навчити PostCSS розуміти синтаксис .scss. і це так само просто, як установка postcss-scss і зміна одного рядка в завданні вище.
Ось повний файл для Gulp, щоб лінту файли SCSS:
Так легко! І це все! Тепер ви можете лінту і CSS, і файли SCSS.
Розширюємо Stylelint плагінами
Так само, як PostCSS, Stylelint розширюється за допомогою плагінів, що насправді дивно!
Давайте розглянемо маленький приклад, де лінтінг допоможе поліпшити читаність коду, а також допоможе штовхнути ледачих розробників, коли вони спробують в легку обійти стандарти прийняті для вашого CSS коду в проекті.
Реальний приклад: лінтінг на практиці
Проект-менеджер, який любить кодіть
Як щодо такого сценарію. Проект-менеджер керує розробкою нового веб-додатки і, щоб не відволікати розробників, вирішує виправити код сам. Він вирішує додати тінь для боксу компонента на: hover. а також додати стан на: hover для посилань дочірнього вузла компонента.
Що може бути гірше?
Ось код, який менеджер додає до проекту:
Вкладеність селектор в Sass - це погано! Використовуємо Линтер!
Вкладеність селектор є необхідним злом при розробці з використанням Sass; це дійсно корисно при правильному використанні, але це один із способів подорож в пекло специфічності. якщо їй зловживати. Вкладеність, як правило, є наслідком ліні розробника і в результаті виходить код, який важко читаємо, і погано написаний. перше правило : Hover може бути на 10 рядків нижче визначення батьківського компонента, в результаті складно зрозуміти до чого воно відноситься. Однак, більш важливим є те, що вкладеність тут взагалі не потрібна.
Ось CSS, в який буде скомпільовано правило, показане вище:
Якби я працював в команді, і хтось запропонував би такий код, то він би мав дуже серйозну розмову зі мною.
Наступний розробник, який приходить і хоче перевизначити це правило каскадирования матиме проблеми. Знаючи про це, я б порадив утриматися від використання вкладеності будь-яку ціну, по крайней мере, якщо ви не знаєте, що ви робите.
На щастя, для цього є плагін! За допомогою Stylelint ми можемо встановити плагін stylelint-statement-max-nesting-depth. і встановити максимальний рівень вкладеності, щоб уникнути зайвої вкладеності.
І просто додаємо в наш файл для Gulp наступний код в таск scss-lint:
Для команд, які знають, що вони роблять, я б встановив максимальний ліміт вкладеності рівний трьом. (Встановіть його нижче для недосвідчених команд)
З максимальним лімітом вкладеності рівним трьом, Stylelint змусить проект-менеджера виправити код вище. Проект-менеджер піде, подумає і повернеться з таким кодом:
Виправлена версія коду більш читається, але все ще не підходить. Там все одно є непотрібна вкладеність селектор! Линтер знає це і змушує проект-менеджера переосмислити його реалізацію, щоб збірка пройшла.
Ось, тепер ми вже прийшли до чогось! Тепер це буде прийнято Лінтера, і збірка пройде. Код вище не поганий, але він завжди може бути краще! Якщо ви хочете бути дійсно суворим. ви можете відключити вкладеність зовсім, залишивши тільки @ правила (наприклад для @media. - примітка перекладача). Це змусить членів команди, включаючи проект-менеджерів серйозно думати про те, що вони пишуть.
Відмінно! Без лінтінга стилів при складанні, який змушував рефактору код - ця небезпечна лінь не була б спіймана і якість коду поступово б деградувало.
Сподіваюся, тепер я переконав вас, що лінтінг стилів є вигідним вкладенням. Лінтінг є вашим другом. Інвестиція недорога, але вона захищає команду від технічної заборгованості у вигляді погано написаного коду.
У добру путь, мій друг розробник і дизайнер!
Післямова
Установи збірку Sass в gulp в один клік
Хотіли б ви використовувати міць лінтінга Sass, разом із загальним процесом gulp-збірки Sass безкоштовно, просто встановивши невеликий пакет через npm?
Я думаю так. У мене є опенсорс проект під назвою Slushie. ви можете прочитати про це в моєму блозі.
Scotty Vernon (Скотті Вернон) є розробником-творцем і директором Wildflame Studios. Він працював з такими проектами, як BBC Sport, BBC RD і іншими. Він завжди не далеко від твіттера, любить німецьке пиво, ігри, а іноді і писати в третій особі.