Этап 4 из 19 · ≈ 4 ч

Организация стилей — БЭМ, CSS Modules, Tailwind

Основа с Junior

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

Главная проблема CSS в большом проекте — глобальность: любое правило может задеть чужой компонент. Подходы решают её по-разному.

подход	идея	цена
БЭМ	соглашение об именах: `card__title--active`	дисциплина, длинные классы
CSS Modules	классы автоматически уникальны для файла	нужна сборка
CSS-in-JS (styled-components, Emotion)	стили в компоненте, динамика из пропсов	цена в рантайме, сложности с SSR
Tailwind	утилитарные классы прямо в разметке	длинная разметка, свой словарь

Что важно знать

Изоляция стилей компонента и общий слой токенов (цвета, отступы, шрифты) в переменных.
Для React-проектов сейчас чаще встречаются CSS Modules и Tailwind; CSS-in-JS с рантаймом уходит из-за серверных компонентов.
Препроцессоры (Sass) всё ещё распространены, но переменные, вложенность и @layer в чистом CSS закрывают большую часть задач.

Критерии освоения

Junior ≈ 4 ч

Применяет один подход к организации стилей последовательно — БЭМ, CSS Modules или Tailwind

Практика. Перевести стили учебного проекта на CSS Modules или Tailwind без глобальных конфликтов.

Middle ≈ 6 ч

Обосновывает выбор подхода к стилям для проекта с учётом SSR и команды
Выносит токены дизайна в переменные и поддерживает темы

Практика. Добавить тёмную тему на токенах в CSS-переменных без изменения компонентов.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все

Что такое БЭМ и зачем методологии именования CSS?Junior

В CSS все классы глобальны, и в большом проекте стили начинают конфликтовать. БЭМ (блок, элемент, модификатор) даёт соглашение: .card — блок, .card__title — элемент блока, .card--featured — модификатор. Классы плоские, специфичность низкая и одинаковая, по…

Полный разбор

Что такое CSS Modules и чем они отличаются от CSS-in-JS?Junior

CSS Modules — обычный CSS-файл, классы которого сборщик превращает в уникальные имена (.title → Card_title__x7a2) и отдаёт объектом: styles.title. Стили изолированы без соглашений об именах, остаются статическим CSS — быстро и кэшируется. CSS-in-JS…

Полный разбор

Что такое утилитарный CSS (Tailwind) и какие у него плюсы и минусы?Junior

Tailwind — набор маленьких классов-утилит (flex, p-4, text-lg, md:grid-cols-2), из которых стиль собирается прямо в разметке. Плюсы: не нужно придумывать имена, стили не разрастаются (в сборку попадают только используемые классы), ограниченная шкала отступов…

Полный разбор

Как стилизовать компоненты React — CSS Modules, Tailwind, clsx?Junior

CSS Modules (Button.module.css) делают имена классов локальными для файла: styles.primary превращается в уникальное имя, конфликтов нет. Tailwind — служебные классы прямо в разметке (px-4 py-2 rounded), без своих CSS-файлов. Условные классы удобно собирать…

Полный разбор

Что такое дизайн-токены?Middle

Токены — именованные значения дизайна: цвета, размеры шрифтов, отступы, радиусы, тени, длительности анимаций. Есть базовые (blue-600 = #2563eb) и семантические (color-accent, color-text-muted, space-md), компоненты используют только семантические. Токены…

Полный разбор

Документация

Есть в картах: Frontend-разработчик React

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования