Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи он решает и каковы причины его возникновения. Если вы тоже заинтриговались — не переключайтесь, следующая статья будет о том, как начать их применять. А если вас интересует внедрение в проект или более продвинутое использование CSS-модулей, третья статья в этой серии будет о том, как использовать их c React.

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

Согласно определению из репозитория, CSS-модули — это:

CSS-файлы, в которых все классы и анимации по умолчанию находятся в локальной области видимости.

CSS-модули — это не официальная спецификация, они не имплементированы в браузеры, скорее, это задача, запускаемая на стадии сборки проекта (например, с помощью Webpack или Browserify), в процессе выполнения которой имена классов и селекторы изменяются так, чтобы образовалась своего рода локальная область видимости (что-то вроде пространства имен).

Как это выглядит и зачем нам это? Сейчас расскажу. Во-первых, вспомните как обычно работают HTML и CSS. Класс прописывается в HTML:

<h1 class="title">Пример заголовка</h1>

И стилизуется в CSS:

.title {
background-color: red;
}

Пока CSS применяется к HTML-документу, фон <h1> будет красным. Нам не нужно как-то обрабатывать CSS или HTML, оба формата понятны браузеру.

CSS-модули используют другой подход. Вместо того, чтобы писать обычный HTML, нам придётся написать разметку в JavaScript-файле, например, в index.js. Вот как это может выглядеть (ниже мы рассмотрим более реальные примеры):

import styles from "./styles.css";

element.innerHTML = 
`<h1 class="${styles.title}">
   Пример заголовка
  </h1>`;

В процессе сборки компилятор проанализирует styles.css, который мы импортировали, потом проанализирует JavaScript и сделает класс .title доступным через styles.title. Затем сгенерирует на их основе новые HTML и CSS-файлы, уже с новыми классами.

Сгенерированный HTML может выглядеть следующим образом:

<h1 class="_styles__title_309571057">
Пример заголовка
</h1>

А вот так может выглядеть CSS:

._styles__title_309571057 {
background-color: red;
}

Значение атрибута class и селектор .title заменены на новые. Исходный CSS в браузер вообще не попадает.

Как сказал Хьюго Жироде́ль (Hugo Giraduel) в своей статье по этому поводу:

[классы] генерируются автоматически, они уникальны и привязаны к исходным стилям.

Вот это и называется поместить стили в локальную область видимости. Они находятся в области видимости определенного шаблона. Если у нас есть файл buttons.css, он будет импортирован только в шаблон buttons.js, и класс .btn, который он содержит, будет недоступен для других шаблонов (например, forms.js), пока мы не импортируем его и туда тоже.

Зачем нам устраивать всю эту канитель с CSS и HTML? Зачем нам это вообще сдалось, ради всего святого?!

Зачем нам нужно использовать CSS-модули?

CSS-модули гарантируют, что все стили одного компонента:

1. Находятся в одном месте
2. Применяются только к этому компоненту и никакому другому

Кроме того, каждый компонент может иметь настоящие зависимости, например:

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;

Этот подход был разработан, что бы решить проблему глобальной области видимости в CSS

Вы когда-нибудь испытывали соблазн в условиях нехватки времени или ресурсов просто писать CSS так быстро, как можете, не думая о последствиях?

Пихали ли в конец таблицы стилей какой-нибудь мусор, собираясь потом его отрефакторить, и так никогда этого и не сделали?

Бывало ли такое, что вы просматривали стили, не до конца понимая что они делают и используются ли они вообще?

Задумывались ли вы, получится ли избавиться от некоторых стилей, ничего при этом не сломав? Не приходилось ли гадать, эти стили работают сами по себе или зависят от других? Случалось ли вам перезаписывать стили?

Это вопросы, которые могут привести к серьезной головной боли, пропущенным дедлайнам и грустным взглядам в окно.

С CSS-модулями и концепцией использования локальной области видимости по умолчанию таких проблем можно избежать. Вам всегда приходится думать о последствиях, когда вы пишите стили.

Например, если вы используете в HTML класс random-gross-class, не обработав его как класс CSS-модуля, стили не применятся, так как CSS-селектор превратится во что-то вроде ._style_random-gross-class_0038089.

Ключевое слово composes

Допустим, у нас есть модуль под названием type.css, содержащий стили для текста. В этом файле может быть, например, такое:

.serif-font {
font-family: Georgia, serif;
}

.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}

Один из этих классов мы используем в шаблоне:

import type from "./type.css";

element.innerHTML = 
`<h1 class="${type.display}">
  Пример заголовка
</h1>`;

В результате получится такая разметка:

<h1 class="_type__display_0980340 _type__serif_404840">
Пример заголовка
</h1>

Оба класса связаны с элементом через использование ключевого слова composes, решая таким образом некоторые проблемы, которые есть в похожих решениях, например в @extend Sass.

Так можно даже подставлять данные из отдельного CSS-файла:

.element {
composes: dark-red from "./colors.css";
font-size: 30px;
line-height: 1.2;
}

БЭМ не нужен

Нам не нужен БЭМ, если мы используем CSS-модули. По двум причинам:

1. Простота чтения. Код вроде type.display так же понятен для разработчика, как и .font-size__serif--large из БЭМ. Его даже проще читать, чем разросшиеся БЭМ-селекторы.

2. Локальная область видимости. Допустим, в одном из модулей у нас есть класс .big и он увеличивает font-size на некоторую величину. В другом модуле у нас есть точно такой же класс .big, который увеличивает padding и font-size на другую величину. И это не имеет никакого значения! Они не будут конфликтовать, так как у стилей различаются области видимости. Даже если модуль импортирует обе таблицы стилей, у классов будет своё уникальное имя, созданное в процессе сборки специально для них.

   Другими словами, при использовании CSS-модулей проблемы специфичности селекторов просто исчезают.

Круто, да?

И это только некоторые из достоинств использования CSS-модулей.

Если вам интересно узнать больше, Глен Маден (Glen Madden) много пишет на эту тему.

В следующей статье из этой серии мы рассмотрим как поднять проект используя Webpack и CSS-модули. Мы будем использовать для этого новейшие возможности ES2015 и рассмотрим в процессе несколько примеров, чтобы в полной мере разобраться в происходящем.

Источник: https://frontender.info/css-modules-part-1-need/

Статьи по теме

Идентификация доменов через Госуслуги с 1 сентября 2026 года: что изменилось для вашего бизнеса и как не потерять сайт

С 1 сентября 2026 года в России вступил в силу Федеральный закон № 569-ФЗ, который вводит обязательную идентификацию администраторов �...

2026-09-02

Яндекс Вебмастер ускорил обновление данных в Мониторинге запросов: что это значит для вашего бизнеса

В мире поискового продвижения скорость принятия решений часто становится решающим фактором успеха. Чем быстрее вы замечаете изме...

2026-08-03

Overlay в РСЯ: новый формат мобильной рекламы, который не раздражает пользователей

23 июля 2026 года Рекламная сеть Яндекса представила новый формат рекламных блоков для мобильных версий сайтов — Overlay. Это событие...

2026-07-29

Нейросети в дизайне сайтов и графике: революция, эволюция или угроза?

«Мне нужен единорог в стиле пиксель-арт за пять секунд» — еще пару лет назад такое техническое задание звучало как анекдот. Сегодня...

2026-07-23

Аналитика нового поколения: как Яндекс Метрика превращает данные в управляемые конверсии

В мире веб-аналитики произошло важное обновление. Компания Яндекс анонсировала масштабное обновление своей системы веб-аналитики �...

2026-07-03

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

Вы когда-нибудь просили ChatGPT написать пост для соцсетей или Midjourney нарисовать картинку, а в ответ получали нечто, что «мягко говоря, не...

2026-07-01

Как оставить отзыв на Яндекс Картах, чтобы модерация его точно пропустила

Как оставить отзыв на Яндекс Картах Чтобы написать отзыв, вам понадобится учетная запись в Яндексе. Сделать это можно одним из трех �...

2026-05-28

Будущее без cookies: альтернативные решения для идентификации пользователей

С 2016 года вводятся ограничения для сторонних (third-party) cookies, и с каждым годом их становится все больше. Как меняется работа с данными и...

2026-05-07

Чем грозят дублированный контент и пустые страницы: ошибки, которые убивают ваш трафик

Дублированный контент — одна из самых распространенных проблем в вебе. Чаще всего он встречается в описаниях товаров и услуг: в высо...

2026-05-07

Формы сбора согласий на сайте

Сайты делают формы регистрации — без этого никуда. Возьмите любой ресурс: от частной фотостудии до городской стоматологии — в 90% с...

2026-04-17

Микрофронтенды — максимально простое объяснение

Что такое микрофронтенды простыми словами? Объясняем на примерах, как это работает и где применяется. Микрофронтенды — эт...

2026-04-08

Почему скорость загрузки сайта — это вопрос выживания в 2026 году

Скорость, с которой открывается ваш сайт, — это не просто техническая характеристика. Это главный фактор, который либо приводит �...

2026-03-13

12 признаков, что ваш сайт безнадежно устарел (и как это проверить)

Раньше посетитель уходил только с совсем «мертвого» сайта — если тот не грузился или выдавал ошибку. Сегодня конкуренция за вним...

2026-03-13

Главные тренды веб-дизайна 2026 года: от гиперминимализма до кибербрутализма

Чем активнее технологии проникают в нашу жизнь, тем сильнее мы жаждем сохранить в ней человеческое тепло. Сегодня перед дизайно�...

2026-03-03

No-code vs Профессиональная разработка: выстрелит ли Tilda в 2026 году?

Искусственный интеллект и платформы без кода обещают, что теперь любой желающий сможет собрать сервис уровня Netflix. Но так ли это �...

2026-02-22