Как обеспечить модульность в CSS?

Question

Accepted Answer

## Идея
Модульность — изоляция стилей компонента, чтобы правки не текли по всему сайту.

## Подходы
- **BEM**: блоки/элементы/модификаторы, низкая связность.
- **CSS Modules / scoped CSS** в бандлере — уникальные имена классов.
- **CSS-in-JS / styled** — стили рядом с компонентом (trade-off runtime).
- **Utility-first** (Tailwind) — композиция утилит вместо кастомных листов.
- Нативно: `@layer`, shadow DOM в веб-компонентах, cascade + custom properties как API темы.

```css
.card { }
.card__title { }
.card--featured { }
```

## Итог
Выберите одну систему границ модулей и не смешивайте три методологии без правил. Токены — общий слой, компоненты — изолированные.