Чистый CSS без ручного ревью: внедряем Stylelint

{
  "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 находит ошибки в 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-минутный демо)

Процесс работы

1. Анализ — изучаем текущий код, препроцессоры, стайлгайд, фреймворки (Tailwind? CSS-in-JS?).
2. Выбор конфига — standard, scss, tailwindcss, css-modules — или комбинация.
3. Настройка правил — адаптируем под ваше именование, порядок свойств, специфику проекта.
4. Интеграция — добавляем в сборщик (webpack/vite), pre-commit hook (husky), CI (GitHub Actions/GitLab CI).
5. Тестирование — прогоняем линтер на всём проекте, фиксим первые ошибки, документируем.
6. Документация — передаём конфиг, инструкцию для разработчиков, рекомендации по доработке.

Ориентировочные сроки

Итого: от 1 до 2 рабочих дней в зависимости от сложности. Свяжитесь с нами — оценим ваш код и подготовим конфиг под ключ.