Процедуры контроля и автоматизация

Для поддержания качества кода и консистентности стилей используются автоматизированные проверки и ручное ревью.

Code Review

Обязательные проверки

1. ✅ Повторяющиеся sx-стили вынесены (3+ повторения)
2. ✅ Адаптив реализован mobile-first
3. ✅ Цвета через семантические токены
4. ✅ style prop только для динамических значений
5. ✅ Нет избыточной специфичности/вложенности (max 3 уровня)
6. ✅ Логические свойства (если RTL проект)
7. ✅ Нет !important без комментария

Автоматизация

# Неиспользуемые стили
npx knip --include files

Stylelint / ESLint:

{
  "rules": {
    "max-nesting-depth": [
      3,
      { "ignore": ["pseudo-classes", "pseudo-elements"] }
    ],
    "declaration-no-important": [true, { "severity": "warning" }],
    "react/forbid-component-props": ["error", { "forbid": ["style"] }]
  }
}

Prettier: prettier-plugin-tailwindcss

ESLint Tailwind: eslint-plugin-tailwindcss

Чеклист разработчика

Перед коммитом

• Все значения из дизайн-токенов
• Mobile-first подход
• Максимум 3 уровня вложенности
• sx не для высокочастотных значений
• Повторяющиеся стили вынесены (3+)
• Анимации с prefers-reduced-motion
• font-display: swap для всех @font-face
• Нет layout shift (CLS) из-за динамических стилей
• Dark mode работает без FOUC (flash of unstyled content)
• Семантические токены для цветов
• Логические свойства (если RTL)
• Нет селекторов по тегам

Перед ревью

• Линтеры проходят
• Неиспользуемые стили удалены
• Классы отсортированы (Tailwind)
• Нет !important без обоснования