CSS и стилизация
Основы CSS для фронтенда — блочная модель, отступы через gap, специфичность селекторов, CSS-in-JS и дизайн-токены.
5 вопросов
JuniorТеорияОчень частоЧто такое блочная модель CSS и что меняет box-sizing?
Что такое блочная модель CSS и что меняет box-sizing?
Элемент имеет четыре слоя: content, padding, border, margin (изнутри наружу). По умолчанию (box-sizing: content-box) width/height задают только содержимое, padding и border добавляются к итогу. При box-sizing: border-box width включает все три, и box сохраняет заданный размер.
Типичные ошибки
- ✗Забывать, что под content-box padding и border добавляются к width
- ✗Думать, что border-box стоит по умолчанию (по умолчанию content-box)
- ✗Путать margin (внешний отступ) с padding (внутренний отступ)
Уточняющие вопросы
- →Почему вертикальные margin между блочными элементами иногда схлопываются?
- →Почему многие сбросы CSS задают
box-sizing: border-boxдля всего?
JuniorТеорияЧастоКак делать отступы между flex-элементами и почему gap лучше margin?
Как делать отступы между flex-элементами и почему gap лучше margin?
Используйте gap (или row-gap/column-gap) на flex-контейнере — поддержан во flexbox с 2020. В отличие от margin, gap создаёт интервал только между элементами, не у краёв, избегая last-child-приёмов и схлопывания. Отступ задаётся один раз на родителе, не на каждом ребёнке.
Типичные ошибки
- ✗Считать, что
gapработает только в Grid, а не во flexbox - ✗Думать, что
gapдобавляет интервал и у краёв контейнера - ✗Ставить margin на каждый элемент и потом править последнего ребёнка
Уточняющие вопросы
- →Как
row-gapиcolumn-gapсвязаны с сокращениемgap? - →Какие приёмы для отступов применяли до появления
gapво flexbox?
MiddleТеорияЧастоКак рассчитывается специфичность селектора CSS и что выигрывает при равенстве?
Как рассчитывается специфичность селектора CSS и что выигрывает при равенстве?
Специфичность — это кортеж: inline-стили, ID, классы/атрибуты/псевдоклассы, элементы/псевдоэлементы (сравнение слева направо). Выигрывает больший. На равенстве — последнее правило (порядок). Универсальный селектор и комбинаторы не добавляют. !important переопределяет каскад; inline старше селекторов.
Типичные ошибки
- ✗Считать специфичность одним плоским числом вместо кортежа
- ✗Думать, что селекторы по атрибуту слабее классов (они равны)
- ✗Считать, что порядок в исходнике бьёт более специфичный селектор
Уточняющие вопросы
- →Как
:where()и:is()учитываются при расчёте специфичности? - →Почему злоупотребление
!importantсчитают признаком плохого кода?
MiddleТеорияИногдаЧто такое дизайн-токены и чем они отличаются от обычных переменных?
Что такое дизайн-токены и чем они отличаются от обычных переменных?
Дизайн-токены — это именованные, платформенно-независимые дизайн-решения (цвет, отступы, типографика, радиусы) с семантическим смыслом (например, color.brand.primary), хранимые как единый источник истины. Часто разбиваются на слои (primitive → semantic → component) и экспортируются на разные платформы (web, iOS, Android). CSS-переменная — лишь псевдоним в одной технологии; токен несёт замысел дизайна, платформенно-независим и управляется дизайн-системой.
Типичные ошибки
- ✗Приравнивать токен к сырой CSS-переменной, игнорируя семантический слой
- ✗Думать, что токены только для браузера, а не платформенно-независимы
- ✗Упускать разбиение токенов на слои primitive→semantic→component
Уточняющие вопросы
- →Зачем разбивать токены на слои primitive, semantic и component?
- →Как инструмент вроде Style Dictionary экспортирует один набор токенов на разные платформы?
MiddleТеорияИногдаКаковы плюсы и минусы CSS-in-JS-библиотеки styled-components?
Каковы плюсы и минусы CSS-in-JS-библиотеки styled-components?
Плюсы: стили ограничены компонентом (нет утечек), динамичны от props, лежат рядом с кодом, поддерживают темизацию. Минусы: затраты в рантайме (внедрение и пересчёт при рендере), больший бандл, сложность SSR/гидратации и слабое кэширование против статичного CSS. Тренд — к zero-runtime CSS-in-JS (vanilla-extract, Linaria) или utility CSS.
Типичные ошибки
- ✗Считать, что у styled-components нет рантайм- и бандл-затрат
- ✗Думать, что его стили глобальны, а не ограничены компонентом
- ✗Игнорировать сложность SSR/гидратации, которую он привносит
Уточняющие вопросы
- →Как zero-runtime CSS-in-JS вроде vanilla-extract избегает рантайм-затрат?
- →Почему рантайм CSS-in-JS может вредить производительности серверного рендеринга?
