Коротко: CSS Modules — это подход, при котором классы CSS становятся «локальными» для компонента: при сборке имена автоматически преобразуются в уникальные (card__title_a3f9). Это решает проблему конфликтов имён: стили одного компонента не «протекают» в другой. Работает через сборщик (webpack, Vite) и импорт из JS.
.title — и оба сломались. CSS Modules локально изолируют стили по компонентам, как в React/Vue, но оставаясь обычным CSS.Глобальный CSS против CSS Modules
| Глобальный CSS | CSS Modules |
|---|---|
| Имена классов общие | имена локальные и уникальные |
| риск конфликтов | конфликтов нет |
| нужны соглашения (BEM) | соглашения не обязательны |
| подключается ссылкой/импортом | импортируется в компонент |
Вкладки: как это работает
Файл называется Card.module.css — расширение .module.css включает режим модуля:
.card {
padding: 16px;
border-radius: 8px;
}
.title {
font-size: 20px;
}Имена внутри файла остаются простыми и короткими — уникальность обеспечит сборщик.
import styles from './Card.module.css';
export function Card() {
return (
<div className={styles.card}>
<h3 className={styles.title}>Заголовок</h3>
</div>
);
}styles.card — это уже преобразованное уникальное имя (например, Card_card__a1b2c). Вы не думаете о конфликтах.
Иногда нужен выход в глобальную область — селектор :global:
:global(.container) { margin: 0 auto; }
:global(body) { font-family: system-ui; }Так стилизуют общие элементы и сторонние библиотеки. Используйте редко — это снова глобальные правила.
Классы можно переиспользовать через composes:
.base { padding: 12px; border-radius: 8px; }
.primary {
composes: base;
background: #003F8F;
color: #fff;
}Получается аналог «модификаторов»: базовый набор плюс отличия.
Чем отличается от похожих подходов
| Подход | Суть |
|---|---|
| BEM | соглашение об именовании, стили глобальные |
| CSS Modules | локальные имена, обычный CSS, сборка |
| Styled Components | CSS пишется внутри JS |
| Tailwind | утилитарные классы в разметке |
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| styles.card — undefined | файл не .module.css |
переименовать файл |
| Стили не применились | класс не передан в className | использовать styles.x |
| Не стилизуется вложенный глобальный элемент | модуль локальный | обернуть в :global() |
| Динамические классы не работают | строка не из модуля | брать из styles или комбинировать |
Проверьте себя
Вопросы и ответы
Нет. Внутри модуля вы пишете обычный CSS; препроцессор (SCSS) можно использовать вместе с модулями.
В классической теме — нет, там нет сборки. В проектах с современным фронтендом (React-блоки и т.п.) — да, если настроен сборщик.
Нет, изоляция уже есть. Но короткие понятные имена внутри модуля всё равно полезны.
Классы сторонних библиотек остаются глобальными. Если нужно их переопределить — используйте :global(...).
Итоги
- CSS Modules делают имена классов локальными и уникальными.
- Файлы называют
*.module.css, классы берут из импорта. - Глобальные стили — через
:global(), переиспользование —composes. - Требуется сборщик: в чистом браузере и классических темах не работает.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.