CSS Academy · Урок

Модули CSS: изолированные стили

Автоматически ограничивайте имена классов областью компонентов с помощью CSS Modules в настройках сборки.

«Модули CSS: изолированные стили» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

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

Модули CSS автоматически ограничивают область действия имён классов компонентным файлом, в котором они определены. Во время сборки каждое имя класса преобразуется в уникальный идентификатор, что предотвращает утечку стилей в глобальную область.

Соглашение об именовании файлов

Давайте CSS-файлу имя с расширением .module.css (или .module.scss для Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

Импорт модулей CSS

Импортируйте модуль как объект JavaScript. Имена классов становятся свойствами:

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

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

Составные классы

Используйте composes, чтобы расширить класс из другого модуля:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

Глобальные классы

Используйте :global(), чтобы отключить локальную область действия для определённого класса:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

Модули CSS в Vite

Vite имеет встроенную поддержку модулей CSS. Файлы, соответствующие шаблону *.module.css, обрабатываются автоматически:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

Модули CSS в webpack

Включите модули в конфигурации css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

Композиция имён классов

Объединяйте несколько классов модуля с помощью шаблонных литералов или библиотеки clsx/classnames:

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

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

Без затрат во время выполнения

Модули CSS полностью обрабатываются на этапе сборки — накладных расходов JavaScript во время выполнения нет. Результатом становится стандартный CSS с переименованными именами классов. Поэтому модули особенно подходят для приложений, чувствительных к производительности.

Поддержка TypeScript

Создавайте определения типов TypeScript для модулей CSS с помощью typed-css-modules или конфигурации cssModuleTypes в Vite, чтобы получать типобезопасный доступ к именам классов.

Модули CSS и CSS-in-JS

Сравнение модулей CSS:

Только на этапе сборки — без затрат JS во время выполнения
Интеграция со стандартными CSS/Sass — привычный синтаксис
Нет динамических стилей через интерполяцию JS
Меньше гибкости для динамических стилей, зависящих от темы, чем у styled-components и Emotion

Быстрая проверка

Как модуль CSS предотвращает конфликты имён классов между двумя разными файлами компонентов?

Повторение

Модули CSS автоматически ограничивают область действия имён классов, преобразуя их в уникальные идентификаторы во время сборки. Импортируйте их как объекты JavaScript и обращайтесь к классам как к свойствам. Используйте :global() для отключения глобальных селекторов и composes для композиции классов. Отсутствие затрат во время выполнения и полная поддержка синтаксиса CSS/Sass делают модули CSS лёгкой альтернативой CSS-in-JS для статических стилей.

Часто задаваемые вопросы

Урок «Модули CSS: изолированные стили» бесплатный?

Да — полный текст урока «Модули CSS: изолированные стили» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Модули CSS: изолированные стили»?

Автоматически ограничивайте имена классов областью компонентов с помощью CSS Modules в настройках сборки. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Модули CSS: изолированные стили»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Styled-components: литералы шаблонов с тегами
Emotion: css() и styled()
Модули CSS: изолированные стили
Vanilla Extract: CSS-in-JS без среды выполнения

← Назад к CSS Academy