Собеседование Frontend (CSS) - вопросы и подготовка

CSS (Cascading Style Sheets) — язык описания внешнего оформления HTML‑документов: цвета, шрифты, раскладки и визуальные эффекты.

Что такое значение initial, как оно восстанавливает стандартное значение свойства, как соотносятся значения браузера по умолчанию и когда использование initial может быть нежелательным?

Что такое наследование стилей, какие свойства наследуются по умолчанию, как переопределять значения и какие ограничения возникают при проектировании дизайн-систем?

Что такое специфичность CSS и как считать вес селекторов? Включает алгоритм расчёта, влияние inline-стилей и типичные проблемы при поддержке больших таблиц стилей.

Что такое каскадность в CSS и как определяется порядок применения правил, откуда берутся стили и какие проблемы возникают при конфликте селекторов?

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

Что такое значение unset в CSS и как оно отличается от initial и inherit?

Что такое значение revert, как оно возвращает значение к предыдущему уровню каскада, как взаимодействует с пользовательскими стилями и какие есть ограничения поддержки?

Что такое блочная модель (Box Model) и из каких частей состоит элемент в CSS.

Что такое свойство box-sizing, включая различия между content-box и border-box, влияние на адаптивную верстку и практические рекомендации?

Что такое нормальный поток документа (Normal Flow) и как в нём размещаются элементы?

Что такое форматирование строчных и блочных элементов, включая особенности отображения, расчета размеров и практические сценарии применения?

Что такое селектор :not() и как он используется для исключения элементов из выборки, а также как это влияет на читаемость кода?

Что такое CSS-селекторы, включая базовые типы селекторов, производительность поиска элементов и влияние на поддержку проекта?

Браузеры находят элементы по селекторам с помощью движка селекторов, который парсит селектор, выбирает начальные кандидаты и затем проверяет соответствие с обходом DOM в соответствии с комбинаторами и псевдоклассами.

Селекторы :is() и :where() — функциональные псевдоклассы, которые позволяют группировать альтернативные селекторы внутри одного выражения и тем самым уменьшать дублирование CSS.

Что такое псевдоклассы, включая состояние элемента, пользовательские взаимодействия и особенности поддержки в браузерах?

Что такое псевдоэлементы, как они генерируют виртуальный контент, в чём отличие от псевдоклассов и какие практические ограничения нужно учитывать.

Селекторы атрибутов выбирают элементы по наличию атрибута или по значению атрибута. Поддерживаются точные и несколько типов частичных совпадений (префикс, суффикс, подстрока, слово, дефисное соответствие), что полезно для стилизации и поиска в JS без добавления дополнительных классов.

Что такое селектор :has() — включая реализацию родительских зависимостей, производительность и реальные production‑сценарии?

Что такое абсолютные единицы измерения, включая px, cm, mm, и какие ограничения их использования в веб‑интерфейсах?

Что такое комбинаторы селекторов, включая потомков, соседние элементы и прямых детей?

Что такое CSS-функции min() и max(), включая применение в адаптивном дизайне и компромиссы между гибкостью и сложностью поддержки?

Что такое относительные единицы измерения и когда их применять?

Что такое современные единицы svh, lvh и dvh, включая мобильные браузеры и проблемы классического vh?

Что такое Flexbox, включая модель контейнера и элементов, основные оси и типичные сценарии применения?

Что такое функция clamp(), включая адаптивную типографику, ограничения и преимущества перед media queries?

Как работает распределение пространства во Flexbox, включая flex-grow, flex-shrink, flex-basis и особенности вычислений?

Есть main axis (основная ось) и cross axis (поперечная ось). Свойства justify-content выравнивают вдоль основной оси, align-items — вдоль поперечной для элементов в одной строке, align-content — управляет распределением строк при переносе (multi-line). Также важны flex-direction, flex-wrap и align-self.

Что такое функция calc() в CSS и как она вычисляет значения во время рендеринга?

В чем различие между em и rem, включая механизм вычисления размеров и проблемы при масштабировании интерфейсов?

Что такое главная и поперечная ось Flexbox, включая влияние свойства flex-direction и практические сценарии использования?

Что такое автоматические отступы (margin: auto) во Flexbox?

Какие ограничения имеет Flexbox при построении сложных сеток, включая двухмерное позиционирование и производительность?

Как работают строки и колонки в CSS Grid, включая grid-template-columns, grid-template-rows и вычисление размеров?

Какие проблемы возникают при создании сложных адаптивных сеток с CSS Grid и как их решать?

Что такое CSS Grid, включая двухмерную систему раскладки, основные сущности и преимущества перед Flexbox?

Когда следует использовать Grid вместо Flexbox, включая критерии выбора, компромиссы и реальные production-примеры?

Именованные области в CSS Grid — это способ дать именам ячейки или группе ячеек в шаблоне с помощью свойства grid-template-areas и затем помещать элементы в эти области через grid-area. Это повышает читаемость шаблонов, потому что визуальная структура задаётся в виде удобной «карты».

Что такое единица fr, включая распределение свободного пространства и ограничения при использовании?

Что такое позиционирование relative?

Как работает автоматическое размещение элементов в Grid, включая алгоритм auto-placement и практические сценарии применения?

Что такое позиционирование sticky?

Что это: position: fixed фиксирует элемент относительно viewport — он выходит из нормального потока и остаётся на одном месте при прокрутке страницы.

Что такое позиционирование absolute — поиск содержащего блока, влияние на поток документа и типичные ошибки?

Что такое контекст наложения (Stacking Context), включая его создание, порядок отрисовки и сложности отладки?

Как работает z-index, как взаимодействует со stacking context и какие типичные проблемы возникают в production.

Что такое Media Queries, включая точки перелома, поддержку устройств и практические рекомендации по проектированию?

Что такое адаптивный дизайн, включая принципы responsive-подхода, мобильную верстку и ограничения реализации?

Коротко: CSS Transition — это механизм, который позволяет плавно изменять анимируемые CSS-свойства при их изменении, задавая длительность, функцию времени и задержку.

Что такое CSS Animation, включая ключевые кадры, циклы выполнения и практические сценарии использования?

Что такое Container Queries, включая отличие от Media Queries, сценарии применения и ограничения поддержки?

Какие проблемы возникают при поддержке большого количества брейкпоинтов и как минимизировать их влияние?

Как проектировать компонентную адаптивность, включая независимость компонентов от страницы и масштабируемость дизайн‑систем?

Браузеры делят рендеринг на этапы (style/layout → paint → composite/raster → GPU). Аппаратное ускорение означает, что часть работы выполняется на GPU или в отдельном потоке композитора, что снижает нагрузку на главный поток и даёт плавные кадры при правильном использовании.

Какие проблемы возникают при анимации свойств, вызывающих reflow и repaint, и как их избегать?

Что такое Critical Rendering Path и как в него входят построение DOM, CSSOM, Render Tree и влияние CSS на время отображения страницы?

Что такое Reflow (Layout), включая причины его возникновения и влияние на производительность интерфейса?

Краткий обзор: какие свойства лучше анимировать, чтобы получить плавные и производительные переходы.

Что такое Repaint, включая процесс перерисовки элементов и способы минимизации затрат?

Как CSS влияет на скорость первого отображения страницы, включая блокирующие стили и стратегии оптимизации?

Что такое методология BEM, включая структуру именования, масштабируемость проекта и типичные ошибки внедрения?

Что такое CSS Modules, включая изоляцию стилей, сборку проекта и ограничения подхода?

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

Какие проблемы возникают при использовании больших CSS-бандлов и какие существуют стратегии их оптимизации?

Что такое CSS Containment, включая свойства contain, изоляцию областей интерфейса и влияние на производительность?

Что такое Utility‑First подход, как работают принципы Tailwind CSS, и какие у этого подхода преимущества и ограничения поддержки.

Что такое CSS-in-JS, включая генерацию стилей во время выполнения, преимущества и компромиссы относительно классического CSS?

Выделяйте токены для цветов, отступов и типографики; строьте повторно используемые компоненты, которые используют токены и семантические переменные; внедряйте правила согласованности через документацию, тесты и автоматизацию.

Как организовать CSS в монорепозитории, включая переиспользование компонентов и предотвращение конфликтов стилей?

Какие антипаттерны возникают при росте CSS-кодовой базы, включая глубокую вложенность селекторов и избыточную специфичность?

Что такое Design Tokens, включая хранение цветов, размеров и типографики, и какие проблемы возникают при масштабировании продукта?

Логические свойства CSS позволяют описывать отступы, размеры и позиционирование относительно логики письма (inline / block), а не фиксированных физических направлений (top/right/bottom/left).

Что такое свойство aspect-ratio и как оно помогает с адаптивными изображениями, видео и упрощением верстки?

Как работают CSS-переменные по сравнению с переменными препроцессоров, включая вычисления во время выполнения и ограничения каждого подхода?

Что такое CSS Nesting, включая синтаксис вложенности, читаемость кода и потенциальные проблемы поддержки?

Что такое CSS Custom Properties, включая динамическое изменение значений, наследование и сценарии использования в дизайн-системах?

Что такое свойство content-visibility и как оно помогает ленивому рендерингу интерфейса?

Что такое CSS Layers (@layer)?

Как построить масштабируемую дизайн‑систему для нескольких продуктов, включая совместное использование компонентов и независимость команд?

Как обеспечить консистентность интерфейсов в большой команде разработчиков, включая стандарты именования и контроль качества CSS?

Как организовать темизацию приложения: светлая и тёмная темы, использование дизайн-токенов и приёмы для минимизации дублирования кода.

Как мигрировать большой legacy CSS-проект на современную архитектуру — стратегия перехода, управление рисками и учёт бизнес-ограничений.

Как проводить аудит CSS-кодовой базы: поиск мёртвых стилей, анализ специфичности и оценка технического долга.

Как спроектировать CSS-архитектуру для крупного SPA-приложения: изоляция компонентов, переиспользование стилей и долгосрочная поддержка?

Какие критерии использовать при выборе между BEM, CSS Modules, CSS-in-JS и Utility-First подходом с учетом масштаба проекта, производительности и требований команды?

Какие метрики и инструменты использовать для контроля производительности CSS в production, включая Core Web Vitals, профилирование рендеринга и анализ бандлов?

Как проектировать CSS для микрофронтендов: изоляция стилей, независимые релизы и предотвращение конфликтов между командами?