Как организовать большой CSS-кодбейз?

Question

Accepted Answer

## Принципы

- **Слои ответственности**: tokens → reset/base → layout → components → utilities/overrides.
- **Изоляция**: BEM / CSS Modules / scoped styles — чтобы не протекали селекторы.
- **Низкая специфичность**: классы вместо длинных цепочек; `@layer` для порядка каскада.
- **Дизайн-токены**: CSS variables для цвета/ритма/типографики.

## Практика в команде

ITCSS-подобная папка (`settings`, `generic`, `elements`, `objects`, `components`, `utilities`). Или component-first в дизайн-системе. Lint: Stylelint, запрет id-селекторов, лимит вложенности.

```text
styles/
  tokens.css
  reset.css
  layout/
  components/
  utilities/
```

## Антипаттерны

Глобальные `.title` без неймспейса, `!important` как архитектура, копипаст отступов вместо токенов, один гигантский `app.css` без границ.

## Итог

Большой CSS живуч, когда есть слои, изоляция имён и предсказуемый каскад — не когда «ещё один файл в конец».