Отладка и оптимизация CSS: инструменты контроля качества кода

  1. Статьи
  2. Верстка сайта
  3. CSS
0 ∞

В этой статье мы рассмотрим инструменты, которые помогают анализировать качество 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": {}
}
Оптимизация кода CSS с помощью сокращения имен классов и зоны видимости

Если, например, нужно исключить !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
    }
}
15 инструментов для аудита и оптимизации кода CSS

 

 

Можно разрешить селекторы .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 покажет список файлов, содержащих ошибки, с указанием их типа и расположения.

Применение stylelint
Свежие инструменты CSS для оптимизации сайтов

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. Добавляйте в него средства, которые повысят эффективность и качество кода.

Наталья Кайдаавтор-переводчик статьи «CSS Debugging and Optimization: Code-quality Tools»