Какие «подводные камни» есть у написания эффективного CSS?

Question

Accepted Answer

## О чём речь
«Эффективный» CSS — не только микрооптимизация селекторов, а предсказуемый каскад и меньше лишней работы layout/paint.

## Gotchas
- Глубокая вложенность и высокая специфичность → сложно переопределять.
- Анимации свойств layout (`width`, `top`) дороже `transform`/`opacity`.
- Огромные универсальные правила и тяжёлые тени/фильтры.
- Необузданные `@import` в рантайме.
- Игнорирование containment/`content-visibility` на длинных списках.

```css
/* лучше анимировать */
.drawer { transform: translateX(0); transition: transform .2s; }
```

Пишите плоские классы, слои `@layer`, избегайте лишних reflow в JS+CSS.

## Итог
Главный gotcha — сложность каскада и дорогие анимации, а не «селектор справа налево убьёт Chrome».