Перейти к основному содержимому

Стилизация

Стилизация в проекте подчиняется единой стратегии, зафиксированной на старте. Все стилевые значения берутся из дизайн-токенов для обеспечения консистентности и поддержки темизации.

Выбор подхода к стилизации​

Допустимые подходы​

Разрешённые подходы:

  • (S)CSS Modules — изолированные стили компонентов
  • Tailwind CSS — utility-first подход
  • MUI System — стилизация через sx prop (v5)
  • Иной подход — по согласованию с Tech Lead

MUST​

  1. Подход к стилизации фиксируется на старте проекта (документируется в README)
  2. Все стилевые значения берутся из дизайн-токенов
  3. Максимум два подхода одновременно (за каждым закреплена зона ответственности)
  4. Один элемент стилизуется одним подходом (исключение: sx + classes на MUI)

Зоны ответственности​

Примерное распределение при использовании двух подходов:

ПодходОтветственность
Tailwind CSSLayout, отступы, типографика
CSS/SCSS ModulesСложные компоненты, кастомизация MUI через classes
MUI System (sx)Одноразовые переопределения MUI в рамках темы

Правило: Если в проекте используется MUI + ещё один подход, то MUI System (sx) считается первым подходом, а второй выбирается из Tailwind или CSS Modules.

Стратегия поддержки​

✅ Безопасно использовать (> 90% покрытие)​

Эти функции можно использовать без fallback:

  • CSS Grid, Flexbox
  • CSS Nesting
  • Container Queries
  • :has() selector
  • Logical Properties
  • Cascade Layers (@layer)
  • Variable Fonts

⚠️Progressive Enhancement ( < 90% покрытие)​

Требуют fallback или проверки поддержки:

/* View Transitions с fallback */
@supports (view-transition-name: none) {
  .page {
    view-transition-name: page-transition;
  }
}

/* Без поддержки — обычный переход */
.page {
  transition: opacity 0.3s ease;
}
/* @scope с fallback */
@supports (selector(:scope)) {
  @scope (.card) {
    .header {
      padding: 1rem;
    }
  }
}

/* Fallback для старых браузеров */
@supports not (selector(:scope)) {
  .card .header {
    padding: 1rem;
  }
}

❌ Не использовать (экспериментальные)​

  • @scroll-timeline — поддержка только Chrome
  • CSS Anchor Positioning — в разработке

Разделы документации​