Для чего нужны CSS module?

CSS Modules — подход, при котором каждый CSS-файл компонента получает собственную область видимости: имена классов уникализируются при сборке.

Как работает

/* Card.module.css */
.title { font-size: 20px; }

import styles from './Card.module.css';

export function Card() {
  return <h2 className={styles.title}>Заголовок</h2>;
}

В итоговом CSS класс превращается во что-то вроде .Card_title__x8f2a, поэтому .title из другого компонента ему не мешает.

Зачем нужны

• Нет конфликтов имён без длинных договорённостей вроде БЭМ.
• Обычный CSS без рантайма — быстро.
• Удаление неиспользуемых стилей — стиль живёт вместе с компонентом.

Ограничения

• Динамические значения передают через CSS-переменные.
• Для глобальных стилей нужен :global.

Коротко для собеседования

CSS Modules изолируют стили компонента через уникальные имена классов при сборке, без рантайма.

Подробнее: CSS Modules