Полный ответ

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 все равно блокирует кадр.

Полный ответ

FOUC, Flash of Unstyled Content, возникает, когда HTML уже отрисован, а нужные CSS или fonts еще не применились. Помогают critical CSS, корректное размещение stylesheet, preload важных fonts, стабильные fallback fonts и отказ от поздней загрузки базовых стилей через JavaScript. В Angular также важно, чтобы server-rendered HTML и client styles давали согласованный first render.

Полный ответ

Custom fonts могут задерживать отображение текста, влиять на LCP и вызывать FOUT или FOIT. Нужно выбирать WOFF2, font-display, preload только критичных начертаний, subset и fallback stack с близкими метриками. Чем больше font files и weights, тем выше риск медленного first render.

Полный ответ

CSSOM — object model разобранных CSS rules. Браузеру нужен CSSOM, чтобы вычислить стили и построить render tree, поэтому внешний stylesheet обычно является render-blocking resource для первого render.

Большой CSS, медленный CDN или @import могут задержать LCP. Помогают critical CSS, удаление unused CSS, разделение styles по routes и аккуратная загрузка fonts.

Полный ответ

• DOM представляет структуру HTML.
• CSSOM содержит разобранные CSS-правила.
• Render tree объединяет видимые DOM-узлы с вычисленными стилями.

Элементы вроде display: none не участвуют в render tree, хотя остаются в DOM.

Полный ответ

Layout, или reflow, вычисляет размеры и положение элементов. Paint превращает styled boxes, text, borders и shadows в пиксели или paint commands. Compositing собирает слои в итоговый кадр и часто может выполняться без нового layout и paint.

Чередование чтения layout-свойств и записи стилей в цикле может вызвать layout thrashing. Операции лучше группировать и измерять через browser Performance panel.

Полный ответ

Это последовательность получения HTML/CSS, построения DOM и CSSOM, создания render tree, layout, paint и compositing до появления пикселей. Блокирующие ресурсы и long tasks удлиняют путь. Оптимизация должна улучшать измеряемый LCP и первый render, а не только число запросов.

Полный ответ

Это ресурсы, без обработки которых браузер откладывает первый render. К ним обычно относятся stylesheets и часть синхронных scripts. Critical CSS, code splitting и корректные defer/async уменьшают блокировку.

Полный ответ

Нужно уменьшить работу на main thread во время scroll: использовать passive listeners, не читать и не писать layout в каждом событии, виртуализировать большие списки и избегать тяжелых shadows/filters на множестве элементов. Sticky, parallax и infinite scroll проверяют на реальных устройствах. В Angular важно не запускать лишние state updates и change detection на каждый пиксель прокрутки.

Полный ответ

transition: all анимирует любые изменившиеся свойства, включая неожиданные и дорогие для layout. Это усложняет поддержку и может создавать случайные анимации.

Лучше явно перечислить свойства:

.button {
  transition:
    transform 150ms ease,
    opacity 150ms ease;
}

Полный ответ

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 для локализации.

Полный ответ

RTL влияет на direction, порядок inline content, иконки направления, отступы, scroll behavior, charts, drag and drop и анимации. CSS logical properties (margin-inline-start, inset-inline-end) уменьшают количество отдельных overrides.

Нельзя просто поменять text-align. Нужно проверить keyboard navigation, focus order, truncation, mixed LTR/RTL text, date/number formatting и screenshots основных экранов.

.toolbar {
  padding-inline-start: 1rem;
  padding-inline-end: 0.5rem;
}

Полный ответ

Обе 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.