Проект зростає, і 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. Увімкніть автофікс при збереженні.
Прискорення code review за допомогою Stylelint
Порівняйте: без лінтера розробник витрачає 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 робочих днів залежно від складності. Зв'яжіться з нами — оцінимо ваш код і підготуємо конфіг під ключ.
Наша компанія має 5+ років досвіду в CSS-лінтингу та провела понад 20 впроваджень Stylelint для клієнтів різного масштабу. Ми знаємо, як зробити налаштування Stylelint швидким і безболісним.