intermediate

CSS Modules

Изолируйте имена классов на компонент, сохраняя обычный CSS, composition и build-time интеграцию.

CSS Modules компилируются в локально scoped имена классов при обычном синтаксисе CSS. Импортируйте стили как объекты; сборка переписывает селекторы в уникальные хеши на модуль.

					/* Button.module.css */
.root { padding: 0.5rem 1rem; }
.primary { composes: root; background: var(--accent); }

					import styles from './Button.module.css';
<button className={styles.primary}>Save</button>

Composition (`composes`) переиспользует declarations; `:global` выходит из scope для reset или сторонних hooks — умеренно.

На интервью: компромиссы scope, SSR, темизация, общие tokens и глобальные utility layers.

Типовые ошибки: локальные имена не чинят порядок cascade; избыточный :global стирает главную выгоду.

Компромисс: безопасность на сборке против всё ещё нужной стратегии глобальных tokens и layers.

Чеклист:

Маленький явный API классов.
Design tokens вне модулей.
Ограничивайте :global.
Проверяйте SSR и загрузку CSS при code split.