Что такое CSS Modules?

Question

Accepted Answer

## Идея

CSS Modules на этапе сборки превращают локальные классы в уникальные имена (`Button_btn_x7f3`), чтобы стили **не конфликтовали глобально**.

```css
/* Button.module.css */
.btn { padding: 0.5rem 1rem; }
.primary { background: var(--brand); }
```

```js
import styles from "./Button.module.css";
<button className={`${styles.btn} ${styles.primary}`} />
```

Глобальное при необходимости: `:global(.legacy)`. Композиция: `composes`.

## Trade-offs

Плюс — изоляция без runtime CSS-in-JS. Минус — строки классов менее «читаемы» в DOM, нужен бандлер, сложнее чистый каскад между пакетами без договорённостей.

## Итог

CSS Modules = локальный scope классов на билде; популярный компромисс между глобальным CSS и CSS-in-JS.