CSS Modules: изолированные имена классов
Включайте CSS Modules в проекте Vite или webpack, чтобы автоматически ограничить имена классов областью файла компонента и устранить утечки глобальных стилей.
«CSS Modules: изолированные имена классов» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое CSS Modules
CSS Modules во время сборки преобразуют имена классов, добавляя уникальный хеш и ограничивая их область действия файлом компонента. Класс с именем .card превращается в .card_a1b2c3 — случайно столкнуться со стилями других компонентов невозможно.
Как работают CSS Modules
Импортируйте файл CSS как объект. Используйте свойства объекта в качестве имён классов. Сборщики (Vite, webpack) выполняют это преобразование.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Динамические имена классов с clsx
Библиотека clsx упрощает условную композицию имён классов с CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}Глобальный CSS в CSS Modules
Используйте :global, чтобы объявлять классы, которые НЕ должны быть изолированы. Это полезно для переопределения классов сторонних библиотек.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Композиция — расширение классов
CSS Modules поддерживают composes, позволяющий наследовать стили другого класса, в том числе из других модулей.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules и изолированные стили (Vue)
Изолированные стили Vue и CSS Modules предотвращают глобальные утечки, но работают по-разному: изолированные стили добавляют атрибуты данных, а CSS Modules преобразуют имена классов. Оба подхода подходят для использования — CSS Modules работают и в React.
CSS Modules в Vite
Vite изначально поддерживает CSS Modules для файлов, имена которых заканчиваются на .module.css. Дополнительная конфигурация не требуется.
TypeScript для CSS Modules
Установите typescript-plugin-css-modules или создавайте файлы .d.ts для CSS Modules с помощью инструмента typed-css-modules, чтобы получить автодополнение имён классов.
Соглашения об именовании в CSS Modules
Поскольку имена классов становятся свойствами JavaScript, в CSS Modules используйте для имён классов camelCase: .buttonPrimary вместо .button-primary (дефис требует обращения через квадратные скобки).
Когда использовать CSS Modules
CSS Modules отлично подходят приложениям React, которым нужны стили, ограниченные областью действия компонента, но полноценное решение CSS-in-JS было бы избыточным. Vite + CSS Modules — это лёгкое решение для стилизации без выполнения во время работы.
CSS Modules и CSS-in-JS
CSS Modules: отсутствие затрат во время выполнения, обычный CSS, лучшая производительность. CSS-in-JS (styled-components): динамические стили во время выполнения, подход с приоритетом JavaScript. Для большинства приложений CSS Modules проще и быстрее.
Быстрая проверка
Что происходит с именем класса CSS при использовании CSS Modules?
Повторение: CSS Modules
Импортируйте файлы .module.css как объекты. Имена классов автоматически ограничиваются областью действия с помощью уникального хеша. Используйте :global() для намеренно глобальных стилей. Применяйте composes для наследования между модулями. Используйте clsx для условных имён классов. Vite изначально поддерживает CSS Modules. В отличие от CSS-in-JS отсутствуют затраты во время выполнения.
Часто задаваемые вопросы
Урок «CSS Modules: изолированные имена классов» бесплатный?
Да — полный текст урока «CSS Modules: изолированные имена классов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «CSS Modules: изолированные имена классов»?
Включайте CSS Modules в проекте Vite или webpack, чтобы автоматически ограничить имена классов областью файла компонента и устранить утечки глобальных стилей. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «CSS Modules: изолированные имена классов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Методология BEM: Block, Element, Modifier
- CSS Modules: изолированные имена классов
- CSS-in-JS: Styled-components и Emotion
- Tailwind CSS: подход utility-first