CSS описывает presentation документа. Браузер разбирает stylesheets в CSSOM, сопоставляет selectors с DOM, разрешает cascade и inheritance, вычисляет значения, а затем использует их для layout, paint и compositing.

Selector выбирает элементы, declaration задает пару property/value внутри rule. Несколько selectors могут совпасть с одним элементом, после чего cascade определяет победившее значение каждого property.

Cascade разрешает конфликт declarations по relevance, origin и importance, cascade layer, specificity, scope proximity и порядку. Specificity — только один этап, поэтому «самый тяжелый selector всегда побеждает» — неверное упрощение.

Некоторые properties, например color и font-family, по умолчанию наследуют computed value родителя; размеры и box properties обычно нет. Наследование применяется после cascade, когда для элемента нет собственного выигравшего значения.

Каждое property имеет initial value. inherit берет значение родителя, initial возвращает specification default, unset выбирает inherit или initial по природе property, revert откатывает текущий cascade origin/layer к более раннему результату.

Box состоит из content, padding, border и margin. При content-box заданная ширина относится только к content, а при border-box включает padding и border. Margin находится снаружи и не входит в размер border box.

rem зависит от root font size, em — от font size текущего контекста, % — от property-specific containing value, viewport units — от viewport, px — CSS pixel. Выбор определяется тем, относительно чего размер должен изменяться.

Custom properties объявляются как --color и читаются через var(). Они участвуют в cascade, наследуются и могут меняться runtime. Sass variables вычисляются при сборке и не существуют в browser CSSOM после compilation.

currentColor означает вычисленное значение property color. Его удобно использовать для borders, shadows и SVG иконок, чтобы они автоматически следовали цвету текста и состояниям компонента.

Специфичность селектора записывают как три числа: ID - классы - типы.

• универсальный селектор *: 0-0-0;
• селектор типа button: 0-0-1;
• class, attribute и pseudo-class: 0-1-0;
• ID selector: 1-0-0.

button {
}

.button {
}

#button {
}

Если все три селектора подходят одному элементу, победит #button со специфичностью 1-0-0, затем .button с 0-1-0, затем button с 0-0-1. При одинаковой специфичности выигрывает правило, расположенное позже в cascade.

Inline style рассматривают отдельно: он сильнее обычной специфичности selector. !important тоже не является частью специфичности: он меняет приоритет declaration в cascade, после чего сравниваются origin, layer, specificity и порядок.

То есть CSS, который браузер сам применяет к HTML-элементам, даже если ты не написал свой CSS.

<h1>Hello</h1>
<p>Text</p>
<button>Click</button>

Даже без CSS у них уже есть внешний вид:

h1 {
  font-size: 2em;
  font-weight: bold;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}

button {
  appearance: auto;
}

При border-box заданные width и height уже включают padding и border. Это делает размеры элементов предсказуемее.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Браузер строит CSSOM и сопоставляет selectors с DOM-элементами, обычно начиная с правой части selector и проверяя ancestors дальше влево. Поэтому слишком общие правые части и глубокие chains могут быть дороже, но в большинстве интерфейсов bottleneck чаще в layout, paint и количестве DOM, а не в одном selector. Писать selectors все равно стоит простыми и устойчивыми к изменениям разметки.

Reset CSS aggressively сбрасывает browser defaults, чтобы начать с почти пустой базы. Normalize CSS сохраняет полезные defaults и выравнивает различия между браузерами точечнее. В современных проектах часто используют небольшой base layer: box-sizing, typography, form controls и явно выбранные defaults дизайн-системы.

На интервью важно услышать trade-off: reset дает больше контроля, но требует явно восстановить полезные defaults, а normalize-подход меньше ломает привычное поведение браузера. Выбор должен быть частью design system или base styles, а не случайным package в dependencies.

Частые ошибки: огромный unused CSS, слишком широкие global rules, тяжелые shadows/filters на больших списках, transition: all, layout properties в частых анимациях и глубокая зависимость от DOM-структуры. Эффективность проверяют DevTools, Coverage и реальными сценариями, а не только визуальным результатом.

Normal flow — стандартное размещение элементов без positioning, float и специальных layout-контекстов. Block-элементы идут сверху вниз, inline-контент располагается внутри строк. Flex и Grid создают собственные правила раскладки для дочерних элементов.

BFC — изолированный контекст раскладки block-элементов. Он удерживает floats и предотвращает схлопывание внешних margin с содержимым в ряде случаев. Его создают, например, display: flow-root, flex/grid containers и некоторые значения overflow.

В нем текст и inline boxes формируют строки внутри контейнера. На расположение влияют line-height, baseline, vertical-align и доступная ширина. Перенос строки создает новый line box.

Вертикальные margin соседних block boxes в normal flow могут объединиться в один margin вместо суммы. Обычно остается наибольший положительный отступ, а отрицательные значения участвуют по отдельным правилам. Flex и Grid items не схлопывают margin.

Между соседними block-элементами, а также между parent и первым или последним child при отсутствии border, padding, inline content и разделяющей высоты. Может схлопываться margin пустого блока. Это относится к block formatting context.

Предпочесть gap, добавить осмысленный padding/border или создать BFC через display: flow-root. Не стоит добавлять случайный overflow: hidden, если обрезание содержимого нежелательно. Решение должно соответствовать layout-смыслу.

У flex/grid items, absolutely positioned elements, floats и элементов в разных BFC. Border, padding или inline content между parent и child также разделяют margin. Горизонтальные margin не схлопываются.

Свойство position определяет, участвует ли box в normal flow и относительно чего работают inset-свойства top, right, bottom, left. Positioning используют для overlays, sticky headers и локального смещения. Основной layout обычно лучше строить Flexbox или Grid.

relative сохраняет место в flow и создает containing block для потомков. absolute исключается из flow, fixed обычно привязан к viewport, sticky ведет себя как normal flow до заданного scroll threshold. Sticky требует подходящего scroll container и inset, например top: 0.

Это локальная система наложения элементов. Новый context создают, например, positioned element с z-index, opacity меньше 1, transform и isolation: isolate. Дочерний элемент не может выйти своим z-index за пределы context родителя.

z-index задает порядок внутри текущего stacking context, а не глобально на странице. Большое число проиграет элементу из context, который целиком расположен выше. Нужно искать родителей, создающих contexts, а не увеличивать значение.

Overflow описывает поведение содержимого, выходящего за padding box. Он может обрезать содержимое или создать scroll container. Это влияет на sticky positioning, доступность скрытого контента и layout.

hidden обрезает содержимое, но контейнер остается программно прокручиваемым. auto показывает scrollbars при необходимости, scroll резервирует прокрутку всегда, clip обрезает без scroll container. Выбор должен сохранять доступность контента с клавиатуры.

Scroll Snap позволяет контейнеру после прокрутки остановиться у заданных snap positions. Контейнер задает ось и строгость, элементы — точки выравнивания. Это CSS-enhancement, а не замена доступной навигации carousel.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

Для горизонтальных галерей, paged sections и сценариев, где остановка на целом элементе ожидаема пользователем. Нужно оставить обычную прокрутку и элементы управления. Для длинного читаемого контента mandatory snapping часто мешает.

Слишком строгий snap может бороться с жестом пользователя, затруднять диагональную прокрутку и перескакивать после изменения размера контента. Safe areas и browser chrome меняют viewport. Поведение нужно проверять на touch devices и с увеличенным шрифтом.

Containing block — прямоугольник, относительно которого вычисляются position и percentage sizes элемента. Его источник зависит от position, formatting context и properties ancestors; для absolute element это не всегда непосредственный родитель.

float изначально нужен для обтекания изображений и вставок текстом. Раньше на нем строили колонки, но это требовало clearfix, ломало высоты контейнеров и плохо выражало намерение layout. Для современной раскладки обычно выбирают Flexbox или Grid, а float оставляют для настоящего text wrapping.

Clearing нужен, когда контейнер должен учитывать плавающие элементы. Исторически использовали clear: both и clearfix через pseudo-element; современный простой вариант — создать BFC через display: flow-root. Лучше сначала проверить, нужен ли float вообще, потому что Flexbox и Grid обычно снимают эту проблему.

Сначала нужно воспроизвести проблему в конкретном браузере, проверить поддержку свойства, cascade, computed styles и минимальный пример. Затем выбирают feature detection через @supports, progressive enhancement, fallback или ограниченный workaround. User agent sniffing оставляют как последний вариант для документированного browser bug.

Это браузер или webview, где часть современных возможностей отсутствует или ограничена: старый engine, embedded webview, режим экономии, слабое устройство или корпоративная среда. Интерфейс должен иметь базовый рабочий слой и улучшаться при наличии возможностей. Это практическая причина использовать progressive enhancement и проверку @supports.

Sass/Less дают nesting, mixins, functions, modules и удобства для дизайн-систем. Минусы: дополнительная сборка, риск глубокой вложенности, абстракций поверх CSS и расхождения с runtime-возможностями браузера. Многие задачи сегодня закрывают native CSS custom properties, nesting, cascade layers и modern selectors.

CSS postprocessors обрабатывают уже написанный CSS: добавляют vendor prefixes, оптимизируют output, раскрывают современный синтаксис или проверяют правила. Типичный пример — PostCSS с Autoprefixer. Это снижает ручную работу, но должно опираться на реальную browser support policy, а не на настройки на всякий случай.

Шрифты подключают через @font-face, задают font-family, src, font-weight, font-style и font-display. Используют WOFF2, preload только для критичных начертаний и fallback stack с похожими метриками, чтобы снизить CLS. Слишком много начертаний ухудшает LCP и first render.

Командные правила для fonts должны описывать источник файлов, разрешенные weights, fallback stack, font-display, preload strategy и связь с design tokens. Это защищает проект от ситуации, когда каждая feature случайно подключает новое тяжелое начертание.

FOUT означает, что браузер сначала показывает fallback font, а потом заменяет его на custom font. FOIT означает, что текст временно невидим, пока custom font не загрузится. Обычно этим управляют через font-display, preload только критичных fonts, subset и fallback с близкими метриками.

Pseudo-element создает стилизуемую часть элемента, которой нет как отдельного DOM-узла: ::before, ::after, ::marker, ::placeholder, ::selection. Его используют для декоративного контента, markers и визуальных деталей. Смысловой текст лучше хранить в HTML, чтобы он был доступен assistive technologies и копированию.

Pseudo-class выбирает элемент по состоянию или отношению: :hover, :focus-visible, :checked, :disabled, :first-child, :has(). Она не создает новый box, а уточняет selector. Для accessibility особенно важны :focus-visible, disabled states и состояния form controls.

:nth-child() считает элемент среди всех siblings, а :nth-of-type() — только среди siblings того же tag name. Например, p:nth-child(2) выберет p, только если он второй child вообще, а p:nth-of-type(2) выберет второй p. Разница важна, когда структура содержит смешанные элементы.

Responsive layout адаптирует интерфейс к разным размерам и возможностям устройства. Mobile-first — стратегия написания CSS, где базовые стили рассчитаны на узкий экран, а более широкие состояния добавляются через min-width. Можно сделать responsive layout и без mobile-first, но mobile-first часто помогает приоритизировать content и performance.

Fixed layout использует жесткие размеры и почти не реагирует на viewport. Fluid layout растягивается в процентах или гибких единицах. Responsive layout меняет структуру, размеры и иногда порядок content через constraints, media queries, Flexbox, Grid и container queries.

block занимает доступную строку, inline участвует в тексте и не принимает обычные width/height, inline-block сохраняет inline-размещение с размером box. flex управляет элементами преимущественно по одной оси, grid — по строкам и колонкам. Выбор определяется задачей layout, а не внешним видом элемента.

Используют visually-hidden class: элемент остается в DOM и accessibility tree, но визуально убран за счет clipping и минимального размера. Нельзя использовать display: none, visibility: hidden или aria-hidden="true", если текст должен быть прочитан screen reader. Для focusable skip-link скрытие должно сниматься при focus.

Чаще всего встречаются screen, print и all. print используют для печатной версии: убрать навигацию, раскрыть URL ссылок, настроить page breaks и контраст. Старые типы вроде speech имеют ограниченную практическую поддержку, поэтому важнее знать реальные media features.

Retina graphics учитывает высокий device pixel ratio, где одному CSS pixel соответствует несколько device pixels. Для растровых изображений используют srcset с x или w descriptors, responsive images и подходящее сжатие. Иконки и простая графика часто лучше работают как SVG, потому что масштабируются без потери четкости.

Flexbox — одномерная модель раскладки для строки или колонки. Она распределяет свободное пространство, выравнивает элементы и управляет их ростом и сжатием. Подходит для toolbar, sidebar/content и элементов компонента.

.layout {
  display: flex;
  gap: 16px;
}

.sidebar {
  flex: 0 0 280px;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

Практика: Flexbox: оси и выравнивание

Flexbox помогает строить одномерные раскладки: строку, колонку, toolbar, группу кнопок, карточку или пару sidebar и content. Он распределяет свободное место, выравнивает элементы, управляет переносом, ростом и сжатием flex items.

Практика: Flexbox: оси и выравнивание

Main axis задается flex-direction: горизонтально для row и вертикально для column. Cross axis перпендикулярна главной. Поэтому смысл justify-content и align-items зависит от направления контейнера.

Практика: Flexbox: column direction

flex-direction задает направление main axis: row, row-reverse, column или column-reverse. От него зависит, куда раскладываются flex items и по какой оси работает justify-content.

Практика: Flexbox: column direction

flex-wrap определяет, должны ли элементы оставаться в одной строке или могут переноситься на новые flex lines. При переносе расстояния между строками можно контролировать через row-gap, а распределение строк — через align-content.

Практика: Flexbox: wrap

gap задает расстояние между flex items и между flex lines, если элементы переносятся. Он принадлежит контейнеру и не добавляет внешний отступ по краям раскладки.

Практика: Flexbox: row-gap и column-gap

В современном CSS это обычно раскрывается примерно в flex: 1 1 0%. Элемент начинает с нулевого basis, может расти и сжиматься, деля доступное пространство с соседями. Для контента часто дополнительно нужен min-width: 0.

Практика: Flexbox: flex-grow

Карточку делают flex-контейнером с flex-direction: column, а нужному нижнему блоку задают margin-top: auto. Auto margin забирает свободное пространство и отталкивает блок к нижнему краю карточки.

Практика: Flexbox: auto margin

Контейнеру задают display: flex, justify-content: center и align-items: center. При flex-direction: row горизонтальное центрирование идет по main axis, а вертикальное — по cross axis.

Практика: Flexbox: центрирование items

justify-content распределяет элементы и свободное пространство вдоль main axis. align-items выравнивает flex items вдоль cross axis. Для отдельного элемента cross-axis выравнивание можно изменить через align-self.

Практика: Flexbox: justify-content и align-items

gap описывает внутреннее расстояние между соседними элементами на уровне контейнера. Не нужны отдельные правила для первого или последнего элемента, отрицательные margin и компенсация краев. Margin лучше оставлять для внешнего расстояния между независимыми блоками.

Практика: Flexbox: gap

flex-basis задает базовый размер до распределения пространства. flex-grow определяет долю положительного свободного места, flex-shrink — участие в сжатии при нехватке места. Итоговый размер также зависит от min/max constraints.

Практика: Flexbox: flex-grow и Flexbox: flex-shrink

flex-basis: 0 начинает распределение свободного места от нулевой базы, поэтому элементы с одинаковым flex-grow чаще получают равные доли. flex-basis: auto сначала учитывает width, height или размер содержимого, а уже потом распределяет оставшееся пространство.

Практика: Flexbox: flex-grow

Flex items по умолчанию имеют automatic minimum size, часто равный min-content width. Длинный текст или вложенный блок может растягивать колонку и ломать layout. min-width: 0 разрешает элементу сжиматься внутри flex-контейнера, после чего работают wrapping, ellipsis или overflow.

Практика: Flexbox: flex-shrink

Контейнеру задают display: flex, фиксированной колонке — flex: 0 0 280px, а гибкой — flex: 1 1 auto и часто min-width: 0. Так sidebar сохраняет ширину, а content занимает оставшееся пространство.

Практика: Flexbox: flex-grow

Для равных колонок обычно задают элементам одинаковое сокращение, например flex: 1 1 0. Нулевой basis убирает влияние начального размера контента, а одинаковый flex-grow делит свободное место поровну.

Практика: Flexbox: flex-grow

Частые ошибки: путать main axis и cross axis, ждать от Flexbox полноценной двумерной сетки, забывать про flex-wrap, использовать margin вместо gap для внутренних расстояний, не учитывать flex-shrink и не задавать min-width: 0 для колонок с длинным контентом.

Практика: Примеры Flexbox

Grid — двумерная система раскладки со строками, колонками и областями. Она позволяет определить структуру контейнера, а элементам — занимать одну или несколько ячеек. Grid удобен для карточек и page-level layout.

Практика: CSS Grid: явная сетка 3 на 3 и CSS Grid: адаптивная сетка товаров

Они описывают явные tracks сетки и их размеры. Можно использовать px, %, fr, minmax(), repeat() и intrinsic keywords. Неявные tracks создаются автоматически для элементов вне заданной сетки.

Практика: CSS Grid: фиксированные tracks и CSS Grid: fr-единицы

Flexbox выбирают для строки, колонки, выравнивания и неизвестного числа элементов. Grid — когда важны согласованные колонки, строки или двумерные области. Если приходится имитировать строки вложенными flex-контейнерами, Grid обычно проще.

Практика: Flexbox: wrap и CSS Grid: адаптивная сетка товаров

Grid управляет двумя измерениями одновременно и начинает с структуры контейнера. Flexbox распределяет элементы вдоль одной основной оси и лучше адаптируется к содержимому. Их часто комбинируют: Grid для страницы, Flexbox внутри компонентов.

Практика: CSS Grid: именованные области и Flexbox: wrap

Grid лучше выбирать для двумерной структуры: согласованных строк, колонок, областей страницы и карточных сеток. Flexbox удобнее для одномерного распределения элементов внутри компонента. Если layout одновременно зависит и от строк, и от колонок, Grid обычно проще и устойчивее.

Практика: CSS Grid: page layout и CSS Grid: grid-template-areas

minmax(min, max) задает диапазон размера grid track. Например, колонка может быть не уже 240px, но растягиваться до доли свободного пространства. Это основа многих responsive grids без media queries.

Практика: CSS Grid: адаптивная сетка товаров

Оба значения создают столько повторяющихся tracks, сколько помещается. auto-fill сохраняет пустые tracks, а auto-fit схлопывает их и растягивает занятые. Разница заметна, когда элементов меньше доступных колонок.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Практика: CSS Grid: auto-fit и minmax

Grid stacking — прием, при котором несколько grid items размещают в одной и той же области сетки или в пересекающихся grid lines. Элементы накладываются друг на друга, а порядок слоя определяется обычными правилами stacking context: порядком в DOM, z-index, position, opacity, transform и другими свойствами.

Это удобно для overlay: текст поверх изображения, badge на карточке, декоративный слой или controlled overlap без position: absolute. Grid при этом продолжает задавать общую геометрию и размер области.

.card {
  display: grid;
}

.card img,
.card .content {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

Практика: CSS Grid: пересекающиеся линии и CSS Grid: текст поверх изображения

В Grid нет прямого аналога flex-wrap, потому что grid items автоматически переходят в новые строки или колонки по правилам auto-placement. Для карточных сеток обычно задают повторяющиеся колонки через repeat(), auto-fit или auto-fill, а минимальный и максимальный размер колонки описывают через minmax().

Так сетка сама вычисляет, сколько колонок помещается в контейнер, и переносит лишние элементы на следующую строку без media queries.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Практика: CSS Grid: auto-fit и minmax

Responsive layout плавно подстраивается под доступное пространство, а adaptive обычно выбирает несколько заранее подготовленных layouts для диапазонов устройств. На практике подходы комбинируют, а границы выбирают по content, не по моделям телефонов.

Mobile-first начинает с базового layout для узкого экрана и добавляет возможности через min-width queries. Это помогает приоритизировать content и progressive enhancement, но не отменяет тестирование desktop, touch, keyboard и разных input capabilities.

Safe area учитывает вырезы, скругления и системные overlays устройства. Значения env(safe-area-inset-*) добавляют необходимые padding при подходящем viewport configuration, особенно для fixed controls у краев экрана.

Layout строят в CSS pixels, а raster assets предоставляют с подходящим resolution через srcset или image-set. SVG масштабируется независимо от DPR. Не следует умножать все CSS-размеры на device pixel ratio вручную.

Layout определяет отображаемую ширину, а sizes сообщает ее браузеру для выбора кандидата из srcset. Если sizes не соответствует реальному layout, браузер может загрузить слишком большой или размытый ресурс.

@media применяет rules при совпадении характеристик viewport, устройства или предпочтений пользователя: width, orientation, hover, pointer, prefers-reduced-motion, prefers-color-scheme и других признаков. Media queries используют не только для breakpoints, но и для адаптации input, motion и contrast. Breakpoints выбирают там, где ломается layout, а не по названиям устройств.

Media query смотрит на viewport или device features, container query — на размер или styles ближайшего query container. Container queries делают компонент адаптивным к месту использования, независимо от ширины всей страницы.

Fluid typography плавно меняет размер между границами. clamp(min, preferred, max) ограничивает вычисленное значение:

.title {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

Границы сохраняют читаемость на очень узких и широких экранах.

CSS methodology — это набор правил для организации CSS: например BEM, SMACSS, OOCSS, CSS Modules или utility-first подход. Методология помогает договориться, как называть классы, где хранить styles и как ограничивать область влияния. Важно не название методологии, а консистентность, понятные границы и documented exceptions.

Tokens — именованные design decisions: colors, spacing, typography, radii, motion. Их хранят в нейтральном source of truth и преобразуют в CSS custom properties, platform constants и design-tool variables. Семантические tokens вроде --color-danger устойчивее прямых названий оттенков.

Cascade layers задают явный порядок групп styles до сравнения specificity. Например, reset, base, components и utilities можно упорядочить один раз, уменьшая войны selectors и !important.

Shadow DOM создает отдельное tree boundary: обычные document selectors не проникают внутрь, а внутренние styles не выходят наружу. Наследуемые properties, CSS custom properties, ::part и ::slotted формируют контролируемые точки настройки.

BEM делит CSS-имена на block, element и modifier:

.user-card {
}
.user-card__title {
}
.user-card--compact {
}

Соглашение делает связи явными и снижает конфликты глобальных стилей, но длинные имена и ручная дисциплина могут быть избыточны при надежной component style isolation.

CSS principles фиксируют подход к именованию, композиции, специфичности, layout, responsive design и переиспользованию. Без таких правил CSS быстро превращается в набор случайных overrides. Хороший ответ должен упомянуть локальность стилей, короткие selectors, осторожность с !important, общий base layer и понятные исключения.

Отклонение допустимо, если стандартный подход плохо решает конкретную задачу: интеграция с внешним UI kit, legacy-код, performance-ограничение или нестандартный layout. Исключение должно быть локальным, объясненным и по возможности задокументированным, иначе оно быстро становится новой неявной методологией.

CSS framework выбирают по требованиям продукта: скорость разработки, accessibility компонентов, кастомизация, bundle size, качество документации, SSR-совместимость и связь с design system. Важно заранее решить, где команда следует framework, а где пишет собственный слой, иначе проект обрастает хаотичными overrides.

БЭМ дает предсказуемые глобальные имена и явно показывает block, element и modifier. Цена — длинные class names, дисциплина соглашений и возможное дублирование контекста там, где framework уже изолирует component styles.

CSS Modules генерируют локальные class names, CSS-in-JS связывает styles с JavaScript runtime или build step, utility-first собирает UI из небольших готовых classes. Выбор влияет на isolation, runtime cost, theming, tooling, server rendering и читаемость markup.

Utilities ускоряют композицию, ограничивают произвольные значения и удаляют неиспользуемые rules при сборке. Минусы — шумная markup, необходимость соглашений для повторяющихся patterns и риск смешать design decisions со случайными utilities без tokens и component boundaries.

Компоненты используют semantic custom properties, а theme переопределяет их на root container. Начальный выбор может учитывать prefers-color-scheme, пользовательская настройка должна иметь приоритет и сохраняться. Проверяют contrast, media assets и browser controls через color-scheme.

Широкие selectors создают неявные зависимости, conflicts и regressions в далеких features. Global layer оставляют для reset, tokens, typography и действительно общих primitives; component и feature styles ограничивают понятными boundaries.

Legacy @import глобально объединяет файлы, может загружать их повторно и создает конфликты имен.

@use загружает module один раз и предоставляет namespace:

@use 'tokens';

.button {
  color: tokens.$primary;
}

Для нового Sass-кода используют @use и @forward.

Основные варианты:

• соглашения именования, например BEM;
• Angular style encapsulation;
• CSS Modules;
• Shadow DOM;
• utility-классы;
• ограничение стилей через feature/component boundaries.

Изоляция уменьшает конфликты, но global tokens, typography и overlays все равно требуют продуманного общего слоя.

Плюсы: единый дизайн, accessibility primitives, быстрый старт, готовые сложные компоненты и меньше дублирования.

Минусы: ограниченная кастомизация, лишний bundle, зависимость от release cycle и сложные обновления. Перед выбором проверяют accessibility, theming, SSR, forms integration, поддержку Angular-версий и качество API.

Critical CSS — минимальный набор стилей, нужный для первого видимого экрана. Его можно встроить в HTML или выделить отдельно, чтобы браузер быстрее показал initial view. В Angular SSR/prerender сценариях это может улучшить perceived performance, но усложняет build pipeline, cache и диагностику визуальных regressions.

Layout вычисляет геометрию render tree: размеры и координаты элементов. Изменение ширины, шрифта или структуры может потребовать пересчета части или всей страницы. Стоимость растет с размером и связанностью layout.

Compositor может дешево перемещать готовый layer, но его сначала нужно rasterize и хранить в GPU memory. Большие layers, filters, uploads и частые изменения content создают overhead. Производительность подтверждают trace, а не наличием transform: translateZ(0).

contain ограничивает влияние layout, paint, size или style элемента на остальную страницу. content-visibility: auto позволяет пропускать rendering вне viewport, сохраняя content для поиска и accessibility tree. Для стабильной прокрутки часто задают contain-intrinsic-size.

Paint рисует пиксели для фона, текста, border, shadow и других визуальных свойств. Он может выполняться без нового layout, если геометрия не изменилась. Большие painted areas и сложные эффекты увеличивают стоимость.

Compositing собирает ранее нарисованные слои в итоговый кадр, применяя трансформации и прозрачность. Эту работу часто можно передать compositor thread/GPU. Но создание и хранение слоев расходует память.

Reflow пересчитывает геометрию и обычно приводит к последующему paint. Repaint меняет пиксели без обязательного пересчета размеров. Compositing может обновить итоговый кадр без обоих этапов для подходящих свойств.

Свойства размеров и геометрии: width, height, margin, padding, border, position offsets, font metrics и изменения DOM. Точная область пересчета зависит от layout и containment. Проверять нужно в Performance panel.

Цвета, backgrounds, borders, shadows и часть filters обычно требуют paint, но не layout. Чем больше область и сложнее эффект, тем дороже операция. Реальная pipeline зависит от браузера и layer structure.

Они часто применяются на этапе compositing без повторного layout и paint содержимого. Это уменьшает работу main thread и делает кадры стабильнее. Гарантии нет: сложная сцена и лишние layers тоже могут быть дорогими.

JavaScript, style calculation и layout в основном выполняются CPU/main thread. GPU часто ускоряет rasterization и compositing слоев. Он не делает произвольную CSS-анимацию бесплатной и не исправляет long JavaScript tasks.

Это поверхность, которую браузер может независимо перемещать и смешивать при сборке кадра. Layers полезны для анимируемых элементов, fixed content и video. Каждый слой требует памяти и может увеличить raster/compositing work.

Браузер решает вынести элемент в отдельный compositor layer из-за transform, animation или других эвристик. Разработчик может подсказать намерение через will-change, но итог контролирует engine. Promotion нужно подтверждать Layers panel.

Он заранее сообщает браузеру, какое свойство скоро изменится, чтобы подготовить оптимизацию. Использовать его следует незадолго до анимации и для ограниченного числа элементов. После завершения долгой подготовки hint можно убрать.

Браузер может создать слишком много слоев и потратить GPU memory. Это увеличивает rasterization, compositing и иногда ухудшает производительность сильнее исходной проблемы. will-change — точечный hint, а не reset.

Offsets меняют геометрию positioned element и могут запускать layout и paint. Transform обычно перемещает готовый слой на этапе compositing. Итог зависит от элемента, поэтому анимацию измеряют.

/* Плохо для частых анимаций */
.box {
  left: 100px;
}

/* Обычно лучше */
.box {
  transform: translateX(100px);
}

Они требуют вычисления пикселей вокруг элемента, размытия и дополнительных offscreen surfaces. Большой blur radius и анимация на крупной области особенно дороги. Иногда дешевле использовать подготовленный asset или меньшую область.

Это повторное чередование DOM writes и layout reads, вынуждающее браузер синхронно пересчитывать геометрию много раз за кадр. Проблема часто возникает в циклах. Чтения и записи нужно группировать.

Сначала прочитать необходимые размеры, затем пакетно изменить DOM. Для кадра использовать requestAnimationFrame, для списков — class changes вместо множества inline writes. Профилировщик покажет forced synchronous layout.

После write вычисленные размеры становятся устаревшими. Чтение offsetWidth требует актуального значения и заставляет браузер немедленно завершить style/layout вместо отложенной пакетной работы. Повторение этого паттерна создает forced reflow.

Запись trace показывает scripting, style recalculation, layout, paint и compositing по кадрам. Можно открыть дорогой event, увидеть call stack и affected nodes. Paint flashing и Layers дополняют анализ.

FPS — число отображенных кадров в секунду. Низкий или нестабильный FPS заметен как рывки анимации и scrolling. Важно смотреть не только среднее, но и пропущенные кадры.

Секунда делится на 60 интервалов: примерно 1000 / 60 = 16.6ms. В этот бюджет входят input, JavaScript, style, layout, paint и compositing. На дисплеях 120Hz бюджет еще меньше.

Callback вызывается перед следующим paint и синхронизирует обновление с refresh cycle. Браузер может приостанавливать его в фоновой вкладке. Тяжелая работа внутри callback все равно блокирует кадр.

Native nesting позволяет вкладывать relative selectors внутрь style rule. Оно уменьшает повторение context, но глубокая вложенность повышает specificity и связанность. Синтаксис и результат следует отличать от дополнительных возможностей Sass.

:has() выбирает element по совпадению relative selector внутри или рядом, например form group с invalid input. Это позволяет стилизовать parent без JavaScript, но слишком широкие selectors на больших деревьях следует применять осознанно.

Style container queries применяют rules по computed style container, прежде всего по custom properties. Это позволяет компоненту реагировать на semantic state контекста. Поддержку конкретного синтаксиса нужно проверять для целевых браузеров.

Logical properties описывают flow-relative стороны: margin-inline-start, padding-block, inset-inline-end. В отличие от left и right, они адаптируются к writing mode и направлению LTR/RTL, уменьшая отдельные overrides для локализации.

Обе pseudo-classes группируют selectors. Specificity :is() равна самому специфичному аргументу, а :where() всегда имеет нулевую specificity. Поэтому :where() удобен для легко переопределяемых defaults.

accent-color настраивает accent native form controls, сохраняя их поведение. color-scheme сообщает браузеру, какие цветовые схемы поддерживает область, чтобы он согласовал controls, scrollbars и системные colors.

Эти media features отражают системные предпочтения пользователя. Первая помогает выбрать начальную theme, вторая — уменьшить необязательное движение. Reduced motion означает не «выключить все», а убрать потенциально проблемные эффекты, сохранив понятную обратную связь.

aspect-ratio задает предпочтительное соотношение сторон box и помогает резервировать место. object-fit определяет, как replaced content вроде image или video вписывается в заданный box: contain сохраняет весь content, cover заполняет область с crop.

overscroll-behavior управляет scroll chaining и browser overscroll actions на границах container. scrollbar-gutter может заранее резервировать место под scrollbar, предотвращая layout shift. Оба свойства применяют точечно, не ломая ожидаемую прокрутку страницы.

subgrid позволяет вложенному grid наследовать tracks родителя по строкам или колонкам. Это полезно для карточек, табличных layouts и форм, где внутренние элементы разных карточек должны выровняться по общей сетке.

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-template-rows: subgrid;
}

Перед применением нужно проверить поддержку целевых браузеров и fallback. Если выравнивание локальное, обычный grid проще и понятнее.

Если нужен только display, можно использовать custom property и overlay. Для интерактивного rating нужны настоящие controls, keyboard support и доступное имя.

.rating {
  --rating: 3.5;
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
}

.rating::before {
  content: '★★★★★';
  background: linear-gradient(90deg, currentColor var(--percent), #c8c8c8 var(--percent));
  background-clip: text;
  color: transparent;
}

Частая ошибка - сделать красивый виджет, но потерять accessibility. Для ввода рейтинга лучше использовать radio group или button group, а не только pseudo-elements.

Что проверяет: Grid, responsive layout, минимальные размеры, отсутствие layout shift.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
}

На интервью важно объяснить, почему minmax(min(100%, 18rem), 1fr) не переполняет узкий viewport, чем auto-fit отличается от auto-fill, и как заранее задать размеры media через aspect-ratio.