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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *