Этап 8 из 12 · ≈ 3 ч

Стили в React

Основа с Junior

CSS Modules, Tailwind, CSS-in-JS и UI-библиотеки компонентов.

React не диктует способ стилизации — выбор за проектом.

способ	когда
CSS Modules	изолированные классы, обычный CSS, без рантайма
Tailwind	быстрая вёрстка утилитами, единая дизайн-система
CSS-in-JS (styled-components, Emotion)	старые проекты, динамические стили из props
UI-библиотеки (MUI, Ant Design, shadcn/ui, Mantine)	готовые доступные компоненты

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

CSS-in-JS с рантаймом плохо сочетается с серверными компонентами — новые проекты чаще берут CSS Modules или Tailwind.
shadcn/ui — не зависимость, а копируемые в проект компоненты на Radix и Tailwind: полный контроль над кодом.
Условные классы — утилита clsx.
Общие токены (цвета, отступы) — в CSS-переменных, чтобы тема менялась без перерисовки React.

Темы этапа

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

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

Junior ≈ 3 ч

Стилизует компоненты CSS Modules или Tailwind и использует clsx для условных классов

Практика. Перевести стили React-проекта на CSS Modules или Tailwind.

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

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

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

Смотреть все

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

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

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

Что такое 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), из которых стиль собирается прямо в разметке. Плюсы: не нужно придумывать имена, стили не разрастаются (в сборку попадают только используемые классы), ограниченная шкала отступов…

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

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

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

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

← Вся карта «React»

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

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

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

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