Темизация на CSS-переменных
Вопрос
Как бы ты сделал поддержку нескольких тем (например, бренды разных клиентов) в приложении?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Дизайн-токены: цвета, отступы, радиусы как кастомные свойства
Базовые значения на `:root`, тема переопределяет их на атрибуте или классе корня
Компоненты используют только токены, без захардкоженных цветов
Переключение темы меняет один атрибут, без перезагрузки CSS
Тему ставить до первой отрисовки, чтобы не мигало
Семантические токены (`--color-accent`) поверх палитры (`--blue-600`)
Что могут спросить следом
- Почему не переменные Sass?
- Как избежать мигания неправильной темы при загрузке?
Разбор
Строю на дизайн-токенах в виде кастомных свойств. Два уровня: палитра (--blue-600) и семантика (--color-accent, --color-surface), компоненты знают только семантические токены. Базовая тема задаётся на :root, а каждая другая тема переопределяет те же свойства на [data-theme='brand-b']. Переключение - смена одного атрибута на html, все компоненты перекрашиваются сами, потому что кастомные свойства наследуются и вычисляются в браузере. Переменные Sass не подходят: они подставляются при сборке, и на каждую тему пришлось бы собирать отдельный CSS. Чтобы не было мигания, атрибут темы ставлю на сервере или маленьким скриптом в head до отрисовки.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.