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

Основа

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

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

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

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

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

Закрытая бета

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.