Проект растёт, и CSS-код превращается в хаос: дубли селекторов, невалидные свойства, путаница в порядке. Даже опытные разработчики тратят часы на ревью стилей, а ошибки всё равно проскальзывают в прод. Stylelint — стандарт де-факто для автоматического линтинга CSS, но его настройка требует понимания синтаксисов и правил. Мы внедряем Stylelint в проекты: конфигурируем под ваш стайлгайд, интегрируем с Prettier, CI/CD и редактором. За 1-2 дня вы получаете чистый, согласованный CSS-код, который линтер проверяет автоматически.
Почему Stylelint, а не Prettier?
Stylelint и Prettier решают разные задачи. Prettier автоматически форматирует отступы, кавычки, переносы. Stylelint же ищет ошибки: несуществующие CSS-свойства, неправильные единицы (px вместо rem), дублирующиеся селекторы, нарушение порядка. На практике они отлично дополняют друг друга: Prettier делает код единообразным, Stylelint — корректным. Без Stylelint в проекте вы рискуете получить баги, которые не заметит ни один code review.
Какие проблемы решает Stylelint?
Реальные ошибки, которые Stylelint ловит автоматически:
-
color-no-invalid-hex— невалидные hex-цвета (#abcde) -
unit-no-unknown— неизвестные единицы (20pxx) -
property-no-unknown— несуществующие свойства (dispay: flex) -
declaration-block-no-duplicate-properties— дубли свойств в одном блоке -
no-duplicate-selectors— одинаковые селекторы в разных местах -
selector-class-pattern— нарушение именования классов (BEM, kebab-case)
Из нашей практики: для крупного e-commerce-клиента за месяц работы мы нашли 150+ дублей селекторов, которые увеличивали вес CSS на 30%. После настройки Stylelint такие ошибки сократились до нуля. Экономия на исправлении только этих дублей составила около $2000 с учётом времени разработчиков.
Как мы настраиваем Stylelint: развёрнутый кейс
Для проекта на React с Emotion мы подключаем @stylelint/postcss-css-in-js, пишем правила для styled-components, отключаем проверку свойств, которые задаются через объект стилей. Результат: линтер проверяет все CSS-in-JS вызовы, как обычные CSS-файлы. Как указано в официальной документации, Stylelint — это «mighty, modern linter that helps you avoid errors and enforce conventions in your stylesheets» (Stylelint documentation).
Установка
npm install --save-dev stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-order npm install --save-dev @stylelint/postcss-css-in-js postcss-syntax Пример конфигурации для SCSS с порядком свойств
{ "extends": [ "stylelint-config-standard", "stylelint-config-standard-scss" ], "plugins": ["stylelint-order"], "rules": { "color-named": "never", "color-no-invalid-hex": true, "unit-no-unknown": true, "property-no-unknown": true, "declaration-block-no-duplicate-properties": true, "no-duplicate-selectors": true, "selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$", "order/properties-order": [ "content", "position", "top", "right", "bottom", "left", "z-index", "display", "flex", "flex-direction", "flex-wrap", "align-items", "justify-content", "grid", "grid-template", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "border", "border-radius", "background", "background-color", "color", "font", "font-size", "font-weight", "line-height", "transition", "animation", "cursor", "pointer-events", "opacity", "overflow", "visibility" ] } } Порядок свойств конфигурируем под ваш стайлгайд. Можно упростить до группировки без строгого порядка внутри группы. Для настройки используем плагин stylelint-order: в правиле order/properties-order можно задать точный порядок или группировку.
Tailwind CSS
Для Tailwind отключаем проверку at-правил:
{ "extends": ["stylelint-config-standard", "stylelint-config-tailwindcss"], "rules": { "at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen", "layer"] }] } } CSS-in-JS (styled-components, emotion)
{ "overrides": [ { "files": ["**/*.{js,jsx,ts,tsx}"], "customSyntax": "@stylelint/postcss-css-in-js", "rules": { "color-named": "never", "property-no-unknown": true } } ] } Подробнее о CSS-in-JS можно прочитать на Wikipedia.
Интеграция с редактором
Установите расширение stylelint.vscode-stylelint и настройте settings.json, отключив встроенный линтер VS Code для CSS/SCSS. Включите автофикс при сохранении.
Как Stylelint ускоряет code review?
Сравните: без линтера разработчик тратит 10-15 минут на проверку стилей в пул-реквесте. Stylelint вылавливает 95% проблем автоматически, на code review остаются только архитектурные вопросы. По нашим замерам, команда из 5 человек экономит до 80% времени на CSS-ревью. При средней ставке $50/час это даёт экономию около $6000 в месяц. Кроме того, стоимость исправления одной CSS-ошибки после релиза может достигать $200, и Stylelint предотвращает такие расходы.
| Параметр | Без Stylelint | Со Stylelint |
|---|---|---|
| Ошибки в стилях | 15-20 на PR | 1-2 (пропущенные линтером) |
| Время code review | 15 мин | 2 мин |
| Баги в продакшне | регулярно | единичные случаи |
Stylelint находит ошибки в 5 раз быстрее ручного ревью: средний PR проверяется за 2 минуты вместо 15. Экономия времени на код-ревью составляет до 80%. Гарантируем, что после нашей настройки количество CSS-ошибок упадёт на 90%. Получите консультацию по настройке Stylelint для вашего проекта.
Типичные ошибки при настройке Stylelint
- Конфликт с Prettier: если не отключить лишние правила, они начнут противоречить друг другу. Используйте
stylelint-config-prettier. - Игнорирование препроцессоров: для SCSS нужен конфиг
stylelint-config-standard-scss, иначе линтер не поймёт вложенность. - Отсутствие pre-commit хука: без husky и lint-staged линтер запускается только вручную или в CI — ценность снижается.
Что входит в настройку Stylelint?
- Конфигурационный файл
.stylelintrc.jsonс кастомными правилами - Интеграция с Prettier (при необходимости)
- Пре-коммит хук (husky + lint-staged)
- CI-скрипты (команда
npm run lint:cssв pipeline) - Документация по правилам и исключениям
- Обучение команды (30-минутный демо)
Процесс работы
- Анализ — изучаем текущий код, препроцессоры, стайлгайд, фреймворки (Tailwind? CSS-in-JS?).
- Выбор конфига — standard, scss, tailwindcss, css-modules — или комбинация.
- Настройка правил — адаптируем под ваше именование, порядок свойств, специфику проекта.
- Интеграция — добавляем в сборщик (webpack/vite), pre-commit hook (husky), CI (GitHub Actions/GitLab CI).
- Тестирование — прогоняем линтер на всём проекте, фиксим первые ошибки, документируем.
- Документация — передаём конфиг, инструкцию для разработчиков, рекомендации по доработке.
Ориентировочные сроки
| Этап | Время |
|---|---|
| Базовая настройка (CSS/SCSS) | 1-2 часа |
| Добавление порядка свойств и кастомных паттернов | +1 час |
| Интеграция с CI и pre-commit | +1 час |
| Настройка CSS-in-JS или Tailwind | +1-2 часа |
Итого: от 1 до 2 рабочих дней в зависимости от сложности. Свяжитесь с нами — оценим ваш код и подготовим конфиг под ключ.