Какой опыт работы со стилями в приложении

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

Умеете ли вы организовать стили так, чтобы они не разваливались на большом проекте, и понимаете ли, почему выбран тот или иной подход. Следом обычно спрашивают, как у вас сделаны темы и почему не взяли альтернативу.

Как отвечать

Расскажите про реальный проект: какой подход, сколько людей правило стили, какую проблему он решил. Цифры берите свои, а не придуманные проценты. Каркас:

• изоляция: CSS Modules с локальными именами классов, БЭМ как соглашение без инструментов, Tailwind с утилитами в разметке. Скажите, что выбрали и почему;
• препроцессор: Sass с переменными и миксинами, актуальна реализация sass на Dart, node-sass давно устарел. Часть его задач уже решает сам CSS: вложенность, @layer, custom properties;
• темы и токены: цвета, отступы и радиусы в CSS-переменных, тёмная тема через подмену набора переменных и prefers-color-scheme;
• адаптивность: Flexbox и Grid, media queries, контейнерные запросы @container для компонентов, которые живут в колонках разной ширины;
• CSS-in-JS: runtime-решения вроде styled-components плохо дружат с React Server Components и добавляют работу в рантайме, поэтому новые проекты чаще берут CSS Modules, Tailwind или zero-runtime библиотеки вроде vanilla-extract.

Если опыт узкий, например только Tailwind, скажите честно и объясните, как решили бы в нём темизацию и переиспользование.

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

Перечисляют всё подряд: Sass, Less, БЭМ, Bootstrap, Tailwind. Интервьюер слышит список, но не слышит решения и причин.

Воюют со специфичностью через !important и глубокие селекторы вместо изоляции и каскадных слоёв.

Приводят в пример оптимизации CSS-спрайты. При HTTP/2 и SVG-иконках это устаревший приём, сегодня говорят про критический CSS, удаление неиспользуемых стилей и размер бандла.