Какие технологии CSS используются

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

Следите ли вы за тем, как изменился CSS за последние годы, и можете ли объяснить, зачем в проекте каждый инструмент. Следом обычно просят сравнить подходы к стилизации компонентов: CSS Modules, Tailwind, CSS-in-JS.

Как отвечать

Разложите ответ на три слоя. Сам язык:

• раскладка: Flexbox для одномерной, Grid для двумерной, subgrid для выравнивания вложенных элементов по сетке родителя;
• custom properties: переменные вида --color-accent живут в каскаде и меняются в рантайме, на них строят темы;
• container queries: @container подстраивает компонент под ширину контейнера, а не окна;
• селекторы и каскад: :has() как родительский селектор, @layer для порядка каскада, нативная вложенность;
• функции и единицы: clamp() для резиновой типографики, логические свойства вроде margin-inline, oklch() для цвета.

Инструменты:

• Sass: переменные, миксины, модули через @use и @forward, а @import в Dart Sass объявлен устаревшим;
• PostCSS и Autoprefixer: префиксы по списку browserslist, руками их не пишут.

Архитектура: БЭМ, CSS Modules с локальными именами классов, utility-first Tailwind. Runtime CSS-in-JS плохо сочетается с серверными компонентами React, поэтому новые проекты чаще берут CSS Modules или Tailwind.

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

Называют em абсолютной единицей. Абсолютная тут px, а em, rem, %, vw считаются от чего-то: em от размера шрифта элемента (для самого font-size от родительского), rem от корня.

Путают переменные Sass и custom properties. Первые исчезают при компиляции, вторые живут в браузере, наследуются и меняются из JavaScript.

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