Что такое CSS-модули

CSS модуль — это способ локальной изоляции стилей в компоненте, чтобы избежать конфликтов имён классов. Имена классов автоматически генерируются в уникальные (например, .button_1a2b3c), что делает их scoped только для конкретного компонента.

Как использовать:

1. Файл стилей должен иметь расширение .module.css (например, Button.module.css).
2. Импортируем стили как объект в JS/TS.

Пример:

/* Button.module.css */
.primary {
  background: blue;
  color: white;
}

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

function Button() {
  return <button className={styles.primary}>Click</button>;
}

Плюсы:

• Нет конфликтов имён.
• Чёткая связь стилей с компонентом.
• Поддержка в сборщиках (Webpack, Vite).