Зачем линтить CSS-файлы?

CSS не является языком программирования в строгом смысле, поэтому многие ошибки в нём не приводят к падению приложения — браузер просто молча игнорирует некорректные правила. Именно из-за этого линтинг CSS особенно полезен: он выявляет проблемы, которые иначе остались бы незамеченными до визуального тестирования или до продакшена.

Что именно проверяет линтер

• Синтаксические ошибки: пропущенные точки с запятой, незакрытые скобки, опечатки в свойствах.
• Невалидные значения: например, color: #ggg или display: flexbox.
• Дубли и конфликты: повторяющиеся свойства в одном правиле, переопределения без причины.
• Стилевые правила команды: порядок свойств, единицы измерения, именование классов, вложенность.
• Потенциально опасные конструкции: !important, слишком высокие специфичности, использование устаревших свойств.

Как это выглядит на практике

Самый популярный инструмент — Stylelint. Он настраивается через конфиг и легко встраивается в редактор, pre-commit хуки и CI.

// .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-no-invalid-hex": true,
    "declaration-block-no-duplicate-properties": true,
    "selector-class-pattern": "^[a-z][a-z0-9-]*$",
    "max-nesting-depth": 3
  }
}

// package.json
"scripts": {
  "lint:css": "stylelint \"src/**/*.css\""
}

После запуска линтер покажет файл, строку и суть проблемы. Многие ошибки можно исправить автоматически флагом --fix, что экономит время на рутинном форматировании.

Где это особенно важно

• Большие команды, где несколько разработчиков пишут стили в одном проекте.
• Дизайн-системы и UI-библиотеки, где важна строгая консистентность.
• Проекты с CSS-препроцессорами и CSS-in-JS, где легко допустить ошибку в синтаксисе.
• CI/CD пайплайны, где линт становится обязательным шагом перед сборкой.

Итог: линтинг CSS стоит применять в любом проекте, где стилей больше нескольких файлов — он ловит ошибки раньше, чем их увидит пользователь, и поддерживает единый стиль кода в команде.