Ответ
CSS модуль — это способ локальной изоляции стилей в компоненте, чтобы избежать конфликтов имён классов. Имена классов автоматически генерируются в уникальные (например, .button_1a2b3c), что делает их scoped только для конкретного компонента.
Как использовать:
- Файл стилей должен иметь расширение
.module.css(например,Button.module.css). - Импортируем стили как объект в 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).
Ответ 18+ 🔞
Да ты послушай, что эти фронтендеры выдумали, блядь! Раньше стили писали — один файл на весь проект, имена классов через дефис, как попало. Потом БЭМ придумали, чтобы не путаться. А теперь, сука, модули CSS! Это ж надо было так заморочиться, ёпта!
Смотри, в чём прикол: ты пишешь стили в файле, который называется, например, Кнопка.модуль.точка.цээсэс, понимаешь? А потом импортируешь их в свой компонент как какой-нибудь объект styles. И там, внутри, твой класс .primary волшебным образом превращается в какую-то дичь типа .primary_abc123. И эта хуйня будет работать ТОЛЬКО для этой конкретной кнопки! Никакой другой div с классом primary на неё не наложится, даже если захочет. Полная изоляция, как в инфекционном отделении!
Вот, смотри, как это выглядит в коде, блядь:
/* Button.module.css */
.primary {
background: blue;
color: white;
}А в компоненте делаешь вот так:
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Жми сюда, не ссы!</button>;
}И в итоге в браузере получится <button class="primary_1a2b3c">. Красота, да? Никаких конфликтов! Стили привязаны к компоненту намертво. Сборщики типа Вебпака или Вайта это всё понимают и поддерживают.
Плюсы, конечно, на лицо: не нужно придумывать супер-уникальные имена классов, не боишься, что твой .card перекроет чей-то ещё .card на другом конце приложения. Всё чисто, всё аккуратно. Хитрая жопа, но работает, блядь!