README.md

CSS

CSS Core

Что такое CSS и как браузер применяет его к HTML?

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

Что такое selector и declaration?

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

Что такое cascade?

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

Что такое inheritance в CSS?

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

Что такое initial value и что делают inherit, initial, unset, revert?

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

Что такое CSS box model?

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

Чем единицы em, rem, %, vw, vh и px отличаются?

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

Что такое CSS custom properties?

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

Что такое currentColor?

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

Веса в CSS

Специфичность селектора записывают как три числа: 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 и порядок.

Что такое user agent style?

То есть 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; }

Что делает box-sizing: border-box?

При border-box заданные width и height уже включают padding и border. Это делает размеры элементов предсказуемее. *, *::before, *::after { box-sizing: border-box; }

CSS Layout

Что такое normal flow?

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

Что такое block formatting context?

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

Что такое inline formatting context?

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

Чем display: block, inline, inline-block, flex, grid отличаются друг от друга?

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

Что такое margin collapsing?

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

Когда margin схлопывается?

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

Как избежать схлопывания margin?

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

Когда margin не схлопывается?

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

Что такое positioning в CSS?

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

Чем отличаются relative, absolute, fixed и sticky?

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

Что такое stacking context?

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

Что такое z-index и почему он иногда не работает?

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

Что такое overflow?

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

Чем отличаются overflow: hidden, auto, scroll и clip?

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

Что такое scroll-snap?

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; }

Когда стоит использовать scroll-snap?

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

Какие проблемы бывают у scroll-snap на мобильных устройствах?

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

Что такое containing block?

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

Практика по CSS

• Примеры Flexbox
• Примеры CSS Grid

CSS Flexbox

Практический пример: css/examples/flexbox

Что такое Flexbox?

Flexbox — одномерная модель раскладки для строки или колонки. Она распределяет свободное пространство, выравнивает элементы и управляет их ростом и сжатием. Подходит для toolbar, sidebar/content и элементов компонента. .layout { display: flex; gap: 16px; } .sidebar { flex: 0 0 280px; } .content { flex: 1 1 auto; min-width: 0; } Практика: Flexbox: оси и выравнивание

Какие задачи решает Flexbox?

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

Что такое main axis и cross axis?

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

Чем justify-content отличается от align-items?

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

Что делает flex-direction?

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

Что делает flex-wrap?

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

Что делает gap во Flexbox?

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

Почему gap часто удобнее, чем margin между элементами?

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

Что делают flex-grow, flex-shrink и flex-basis?

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

Что значит flex: 1?

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

Чем flex-basis: 0 отличается от flex-basis: auto?

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

Почему во Flexbox часто нужен min-width: 0?

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

Как сделать равные колонки через Flexbox?

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

Как прижать кнопку или блок к низу карточки через Flexbox?

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

Как центрировать элемент по горизонтали и вертикали через Flexbox?

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

Какие типичные ошибки бывают при использовании Flexbox?

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

CSS Grid

Практический пример: css/examples/grid

Когда лучше использовать Flexbox, а когда CSS Grid?

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

Что такое CSS Grid?

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

Чем Grid отличается от Flexbox?

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

Когда лучше использовать Grid вместо Flexbox?

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

Что делают grid-template-columns и grid-template-rows?

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

Что такое minmax()?

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

Что такое auto-fit и auto-fill?

Оба значения создают столько повторяющихся 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 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 wrapping?

В 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

CSS Responsive

Чем responsive design отличается от adaptive design?

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

Что такое mobile-first?

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

Что такое media query?

@media применяет rules при совпадении характеристик viewport или устройства: width, orientation, hover, pointer, preferences пользователя. Breakpoints выбирают там, где ломается layout, а не по названиям устройств.

Что такое container query и чем она отличается от media query?

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

Что такое fluid typography и как работает clamp()?

Fluid typography плавно меняет размер между границами. clamp(min, preferred, max) ограничивает вычисленное значение: .title { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); } Границы сохраняют читаемость на очень узких и широких экранах.

Что такое safe area?

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 вручную.

Как responsive images связаны с responsive layout?

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

CSS Architecture

Какие плюсы и минусы у БЭМ?

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

Чем CSS Modules, CSS-in-JS и utility-first CSS отличаются?

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

Какие плюсы и минусы у Tailwind-подхода?

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

Что такое design tokens?

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

Как сделать theme и dark theme?

Компоненты используют 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.

Что такое cascade layers @layer?

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

Что такое Shadow DOM style encapsulation?

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

Что такое BEM?

BEM делит CSS-имена на block, element и modifier: .user-card { } .user-card__title { } .user-card--compact { } Соглашение делает связи явными и снижает конфликты глобальных стилей, но длинные имена и ручная дисциплина могут быть избыточны при надежной component style isolation.

Чем SCSS @import отличается от @use?

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 все равно требуют продуманного общего слоя.

Какие плюсы и минусы готового UI Kit?

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

CSS Rendering и Performance

Что такое reflow/layout?

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

Почему GPU не делает любую анимацию бесплатной?

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

Что делают contain и content-visibility?

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

Что такое repaint?

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

Что такое compositing?

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

Чем reflow отличается от repaint?

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

Какие CSS-свойства чаще вызывают layout?

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

Какие CSS-свойства чаще вызывают paint?

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

Почему transform и opacity обычно лучше для анимаций?

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

Что выполняется на CPU, а что может уйти на GPU?

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

Что такое compositor layer?

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

Что такое layer promotion?

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

Что делает will-change?

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

Почему will-change нельзя ставить на все элементы?

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

Почему top/left часто хуже для анимаций, чем transform?

Offsets меняют геометрию positioned element и могут запускать layout и paint. Transform обычно перемещает готовый слой на этапе compositing. Итог зависит от элемента, поэтому анимацию измеряют. /* Плохо для частых анимаций */ .box { left: 100px; } /* Обычно лучше */ .box { transform: translateX(100px); }

Почему box-shadow и filter могут быть дорогими?

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

Что такое layout thrashing?

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

Как избежать layout thrashing?

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

Почему чтение offsetWidth после записи стилей может быть проблемой?

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

Как DevTools Performance помогает искать reflow/repaint?

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

Что такое FPS?

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

Почему 60 FPS означает бюджет около 16.6ms на кадр?

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

Как requestAnimationFrame помогает с анимациями?

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

Modern CSS

Что такое CSS nesting?

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

Чем :is() отличается от :where()?

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

Что такое :has()?

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

Что такое style queries?

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

Для чего нужны accent-color и color-scheme?

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

Как работают prefers-color-scheme и prefers-reduced-motion?

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

Что такое logical properties?

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

Для чего нужны aspect-ratio и object-fit?

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

Что делают overscroll-behavior и scrollbar-gutter?

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