Какие инструменты для стилей вы используете и выделяете ли что-то в JS

Что проверяют

Выбираете ли вы подход к стилям осознанно и понимаете ли цену CSS-in-JS. Вторая половина вопроса про то, выносите ли вы стили в JavaScript и что именно, а следом спрашивают, как это сочетается с серверными компонентами React.

Как отвечать

Назовите свой основной стек и объясните, почему именно он:

• CSS Modules: локальные имена классов без рантайма, работают из коробки в Vite и Next.js, дружат с серверным рендерингом;
• Sass: сейчас это Dart Sass, node-sass и LibSass устарели. Модули строятся на @use и @forward, а @import объявлен устаревшим;
• PostCSS: Autoprefixer по списку из Browserslist и другие плагины, часто работает незаметно внутри сборщика;
• Tailwind CSS: утилитарные классы, в четвёртой версии конфигурация переехала в CSS через @theme. Интерфейс собирается быстро, но нужна дисциплина с повторяющимися наборами классов;
• CSS-in-JS: styled-components и Emotion генерируют стили в рантайме. Без рантайма работают vanilla-extract, Linaria, Panda CSS, StyleX: стили пишутся в TypeScript, а на выходе статический CSS.

Про вынос в JS сильнее звучит взвешенный ответ. В JS уходят только значения, которые реально вычисляются из состояния: прогресс, координаты, цвет из данных. Их передают CSS-переменной через style, а сами правила остаются в CSS. Темы тоже переключаются переменными на корневом элементе, ThemeProvider для этого не обязателен. Современный CSS закрыл многое, ради чего раньше брали JS: вложенность, :has(), контейнерные запросы, @layer.

Где спотыкаются

Не знают цену рантайм-CSS-in-JS. Стили считаются при рендере, растёт бандл, а в серверных компонентах React такие библиотеки не работают, им нужен клиентский контекст. Сами авторы styled-components перевели её в режим поддержки.

Собирают классы Tailwind из кусочков вроде bg-${color}-500. Сканер не видит итогового имени, и класс не попадает в сборку. В коде должна стоять полная строка класса.

Отвечают «использую Tailwind» без аргументов. Интервьюер ждёт условий выбора: размер команды, дизайн-система, SSR, требования к производительности.