CSS и стилизация
CSS — декларативный язык: вы не пишете, как нарисовать элемент, а объявляете правила, а движок сам разрешает конфликты между ними. Отсюда и название — Cascading Style Sheets, «каскадные таблицы стилей»: когда на один элемент претендуют несколько правил, победителя выбирает каскад по специфичности, важности и порядку. Для JavaScript-инженера это чужая модель — здесь нет ни явного порядка выполнения, ни вызовов, и именно поэтому CSS «течёт» неожиданно.
Три вещи стабильно валят кандидатов. Первая — блочная модель: по умолчанию width задаёт только содержимое, а padding и border добавляются сверху, и box раздувается. Вторая — специфичность: это кортеж из нескольких разрядов, а не единое очко, поэтому один id перебивает сколько угодно классов. Третья — CSS-in-JS: удобная колокация стилей с кодом не бесплатна, у неё есть цена в рантайме. Каждый механизм разобран в слоях ниже.
Карта темы
- Основы CSS и каскад — из чего состоит правило, как работает каскад и наследование, что решает конфликт стилей.
- Блочная модель — четыре слоя box и что меняет
box-sizingмеждуcontent-boxиborder-box. - Интервалы и gap — почему
gapна контейнере лучшеmarginна каждом элементе. - Специфичность селекторов — кортеж специфичности, разрешение равенства по порядку и роль
!important. - CSS-in-JS — стили в JavaScript через styled-components — плюсы, цена в рантайме и zero-runtime-подход.
- Дизайн-токены — именованные платформенно-независимые дизайн-решения и чем токен отличается от CSS-переменной.
Частые ошибки и ловушки
| Ошибка | Последствие |
|---|---|
Считать border-box значением по умолчанию | По умолчанию content-box, и padding с border раздувают box сверх заданной width |
Путать padding (внутри) и margin (снаружи) | Отступ появляется не там, где ждали; правки идут вслепую |
| Считать специфичность одним числом | Три класса не перебьют один id — разряды кортежа не переносятся между собой |
| Думать, что порядок в файле бьёт специфичность | Более специфичное правило выигрывает независимо от того, где оно написано |
Ставить margin на каждый flex-элемент | Приходится править последнего ребёнка и ловить схлопывание; gap решает это одним свойством |
| Считать CSS-in-JS бесплатным | Рантайм-внедрение и пересчёт при рендере плюс сложность SSR и гидратации |
| Приравнивать дизайн-токен к CSS-переменной | Теряется семантический слой и платформенная независимость токена |
Значение для собеседований
CSS-вопросы в интервью JavaScript-инженера — это проверка не зубрёжки свойств, а понимания модели: каскада, блочной модели и специфичности. Кандидат, который объясняет специфичность через «кортеж разрядов, сравниваемый слева направо, а на равенстве — порядок», сразу опережает того, кто помнит только «id сильнее класса».
Что обычно проверяют:
- Из чего состоит правило CSS и как каскад выбирает победителя при конфликте.
- Четыре слоя блочной модели и что именно меняет
box-sizing. - Как считается специфичность и что выигрывает при точном равенстве.
- Плюсы и цену CSS-in-JS; чем дизайн-токен отличается от обычной переменной.
Типичный неверный ответ: «специфичность — это сумма очков, поэтому три класса бьют один id». На самом деле специфичность сравнивается поразрядно: разряд id старше разряда классов целиком, и никакое число классов не «дотянется» до одного id.