Подходы к организации CSS
Вопрос
Какие подходы к организации стилей в большом проекте знаешь? Что выберешь для нового React-приложения и почему?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
БЭМ: изоляция именами, без сборки, но на дисциплине
CSS Modules: уникальные имена при сборке, обычный CSS, без рантайма
CSS-in-JS: рантайм (цена при рендере, сложности с RSC) и без рантайма (извлечение при сборке)
Утилитарный CSS (Tailwind): нет придумывания имён, CSS не растёт, длинные классы
Дизайн-токены на кастомных свойствах и каскадные слои для порядка
Выбор аргументирован: команда, SSR/RSC, дизайн-система
Что могут спросить следом
- Как бы сделал тёмную тему или брендирование?
- Как подружить свои стили со стилями UI-библиотеки?
- Что делать, если в проекте уже смешаны три подхода?
Разбор
Главная проблема CSS - глобальность, и подходы различаются тем, как её решают. БЭМ изолирует договорённостью об именах: работает без инструментов, но держится на дисциплине. CSS Modules делают то же сборкой: имена классов получают хеш, конфликты исключены, а на выходе обычный CSS без затрат в рантайме. Рантайм CSS-in-JS удобен стилями от пропсов, но генерирует стили в браузере и в серверных компонентах React работает только на клиенте; поэтому сейчас популярнее варианты без рантайма вроде vanilla-extract. Tailwind снимает вопрос имён и не даёт CSS разрастаться, но требует договорённостей. Для нового React-приложения на Next с серверными компонентами я бы взял CSS Modules или Tailwind, а поверх токены на кастомных свойствах для тем и @layer, чтобы стили библиотек сидели в раннем слое и не воевали с нашими.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.