Подходы к организации стилей
Вопрос
Какие есть подходы к стилям и что выбрать для нового проекта?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
БЭМ и модули решают коллизии имён
CSS-модули дают локальность на уровне сборки
CSS-in-JS даёт динамику, но цена - рантайм и вопросы с SSR
утилитарный подход (Tailwind) убирает нейминг и мёртвые стили
переменные CSS дают темизацию без пересборки
выбор зависит от команды и проекта, а не от моды
Что могут спросить следом
- Почему CSS-in-JS теряет популярность
- Как устроена тёмная тема на переменных
- Что делать со стилями в дизайн-системе
Разбор
Проблема всегда одна - глобальное пространство имён. БЭМ решает её соглашением, CSS-модули - хэшированием на сборке, CSS-in-JS - генерацией, утилитарный подход - тем, что своих имён почти нет.
CSS-in-JS даёт динамику от пропсов, но платит рантаймом и сложностями с SSR и RSC; именно поэтому индустрия сместилась к нулевому рантайму и Tailwind.
Tailwind убирает нейминг и мёртвые стили, но делает разметку шумной и требует дисциплины в выносе повторов в компоненты.
Что общее и важнее выбора: дизайн-токены в переменных CSS. Они дают темизацию без пересборки, работают с любым подходом и переживают смену библиотеки.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.