Отладка и оптимизация CSS: инструменты контроля качества кода
В этой статье мы рассмотрим инструменты, которые помогают анализировать качество CSS-кода. Мы остановимся на двух инструментах:
- Stylelint.
- UnCSS.
Stylelint поможет найти следующие проблемы: дублирующие селекторы, недопустимые правила или ненужная детализация. Все это оказывает огромное влияние на качество CSS.
UnCSS проверяет CSS на наличие неиспользованных селекторов и свойств. Инструмент анализирует стили, список HTML-страниц и очищает CSS.
Оба инструмента используют Node.js и могут быть установлены с применением менеджера пакетов npm.
Stylelint
Stylelint поможет избежать ошибок и обеспечит соблюдение синтаксиса CSS. Данный инструмент включает в себя более 160 правил поиска ошибок. А также создавать собственные правила с помощью специальных плагинов.
Установка и конфигурация stylelint
Установите stylelint также как и любой npm пакет:
npm install -g stylelint
Этот инструмент не поставляется со стандартным файлом конфигурации. Создадим файл .stylelistrc в директории проекта. Он будет содержать правила конфигурации на основе синтаксиса JSON (JavaScript Object Notation) или YAML (Yet Another Markup Language). Пример, приведенный в данном разделе, использует JSON.
Файл .stylelistrc должен содержать объект, у которого есть свойства rules. Свойство состоит из набора правил stylelist и их значений:
{
"rules": {}
}
Если, например, нужно исключить !important, то нужно установить для declaration-no-important значение true.
{
"rules": {
"declaration-no-important": true
}
}
Stylelint поддерживает более 150 правил для нахождения синтаксических ошибок, неверных правил и селекторов. Полный список правил и их значений доступен в руководстве пользователя stylelint.
Начинаем работу с базовой конфигурацией stylelint
Проще начать с базовой конфигурации инструмента, а затем настроить его под нужды вашего проекта. Конфигурация stylelint-config-recommended включает в себя все правила «возможных ошибок». Установите ее, используя npm:
npm install -g stylelint-config-recommended
После этого в директории проекта создайте файл .stylelistrc, который будет содержать следующий код:
{
"extends": "/absolute/path/to/stylelint-config-recommended"
}
Замените/absolute/path/to/директорией, в которую установлен stylelint-config-recommended. Глобальные пакеты npm чаще всего можно найти в директории Systems в Windows 10, и в /usr/local/lib/node_modules в системах Unix/Linux и macOS. Используйте команду npm list –g для поиска директории global node_modules.
Теперь можно расширить конфигурацию, добавив rules. Например, чтобы запретить префиксы поставщиков, файл .stylelistrc должен содержать следующий код:
{
"extends": "/absolute/path/to/stylelint-config-recommended",
"rules": {
"value-no-vendor-prefix": true
}
}
Можно разрешить селекторы .sidebar .title , но не #footer_nav. Это можно сделать, добавив правило selector-max-specificity:
{
"extends": "/absolute/path/to/stylelint-config-recommended",
"rules": {
"value-no-vendor-prefix": true,
"selector-max-specificity": "0,2,0"
}
}
Применение stylelint
Для проверки CSS с помощью stylelint запустите команду stylelint, передав ей путь к файлу стилей в качестве аргумента:
stylelint stylesheet.css
Можно проверить все CSS файлы в конкретной директории:
stylelint "./css/**/*.css"
Stylelint также способен проверить CSS, встроенный в HTML- файлы. Для этого передайте в качестве аргумента путь к HTML- файлу.
После завершения работы stylelint покажет список файлов, содержащих ошибки, с указанием их типа и расположения.

UnCSS
UnCSS удаляет неиспользуемые CSS-свойства. Если ваши проекты включают в себя Bootstrap или CSS Reset, примените UnCSS. Он уменьшит вес вашего кода.
Установка UnCSS
Вы можете установить UnCSS, используя следующую команду:
npm install -g uncss
Использование UnCSS из командной строки
Для запуска UnCSS необходим путь к файлу или URL-адрес HTML-страницы, которая содержит связанный CSS-файл. Например:
uncss http://sitepoint.com/
UnCSS проанализирует HTML и связанные с ним таблицы стилей. После чего выведет оптимизированный CSS. Для редиректа используйте оператор переадресации (>):
uncss http://sitepoint.com/ > optimized.css
Утилите также можно передать URL-адресов. UnCSS будет анализировать каждый файл. А также выводить оптимизированный CSS, который содержит правила, влияющие на одну или большее количество страниц:
uncss index.html article-1.html article-2.html > optimized.css
Системы сборки
Самыми распространенными из них являются Grunt и webpack. У всех имеется обширная документация и крупные сообщества разработчиков.
Системы сборки автоматизируют задачи объединения и оптимизации. Большинство инструментов сборки также включают в себя плагины для оптимизации JavaScript и изображений.
Придерживайтесь правильного подхода к формированию собственного набора инструментов для работы с CSS. Добавляйте в него средства, которые повысят эффективность и качество кода.