Перейти к основному содержимому

200 вопросов по веб-дизайну

В РАЗРАБОТКЕЛАБОРАТОРИЯНЕ ОБЯЗАТЕЛЬНО

200 вопросов по веб-дизайну​

Основы веб-технологий​

Вопрос​

Что такое веб-дизайн?

Ответ​

Веб-дизайн — это процесс создания внешнего вида и пользовательского интерфейса веб-сайтов. Он включает компоновку страниц, цветовые схемы, типографику, графику, анимации и взаимодействие с пользователем. Цель — обеспечить удобство, эстетичность и функциональность.

Вопрос​

Какие основные технологии используются во фронтенде?

Ответ​

Основные технологии — HTML, CSS и JavaScript.
HTML задаёт структуру документа, CSS отвечает за оформление и позиционирование, JavaScript добавляет интерактивность и динамическое поведение.

Вопрос​

Что такое семантический HTML?

Ответ​

Семантический HTML — это использование тегов, которые точно описывают смысл содержимого. Например, <header>, <nav>, <main>, <article>, <section>, <footer> вместо множества <div>. Это улучшает доступность, SEO и читаемость кода.

Вопрос​

Зачем нужен DOCTYPE в начале HTML-документа?

Ответ​

DOCTYPE указывает браузеру, какую версию HTML использовать для рендеринга страницы. Для современных сайтов используется <!DOCTYPE html>, что включает стандартный режим отображения и предотвращает переход в quirks mode.

Вопрос​

Что такое метатег viewport и зачем он нужен?

Ответ​

Метатег viewport контролирует масштабирование и размер области просмотра на мобильных устройствах. Без него страница может отображаться слишком мелко или требовать горизонтальной прокрутки. Пример:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML и структура документа​

Вопрос​

Как правильно подключить внешний CSS-файл?

Ответ​

С помощью тега <link> внутри <head>:

<link rel="stylesheet" href="styles.css">

Вопрос​

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

Ответ​

Атрибут alt обязателен для описания содержимого изображения. Если изображение декоративное, alt оставляют пустым (alt=""), чтобы скринридеры его игнорировали.

Вопрос​

Чем отличается <span> от <div>?

Ответ​

<div> — блочный элемент, создаёт новый блок в потоке документа. <span> — строчный элемент, используется внутри строкового контента без переноса. Оба не имеют семантического значения по умолчанию.

Вопрос​

Как создать гиперссылку на другую страницу?

Ответ​

С помощью тега <a> с атрибутом href:

<a href="about.html">О нас</a>

Вопрос​

Как открыть ссылку в новой вкладке?

Ответ​

Добавить атрибут target="_blank" и для безопасности — rel="noopener":

<a href="https://example.com" target="_blank" rel="noopener">Сайт</a>

Основы CSS​

Вопрос​

Что такое селектор в CSS?

Ответ​

Селектор определяет, к каким HTML-элементам применяется правило стилей. Примеры: p (все абзацы), .class (элементы с классом), #id (элемент с уникальным id).

Вопрос​

Как задать цвет текста в CSS?

Ответ​

С помощью свойства color:

p {
  color: #333;
}

Можно использовать HEX, RGB, HSL, именованные цвета.

Вопрос​

Что делает свойство display?

Ответ​

Свойство display определяет тип отображения элемента: block, inline, inline-block, flex, grid, none и другие. Оно влияет на расположение элемента и его взаимодействие с соседями.

Вопрос​

Чем отличается margin от padding?

Ответ​

margin — внешний отступ между элементом и другими элементами. padding — внутренний отступ между содержимым элемента и его границей. Граница (border) находится между ними.

Вопрос​

Как центрировать блок по горизонтали?

Ответ​

Для блочного элемента с фиксированной ширины:

.container {
  width: 800px;
  margin: 0 auto;
}

Для флекс-контейнера:

.parent {
  display: flex;
  justify-content: center;
}

Блочная модель и box-sizing​

Вопрос​

Что такое блочная модель (box model) в CSS?

Ответ​

Блочная модель описывает, как каждый HTML-элемент представлен как прямоугольник, состоящий из четырёх областей: контент (content), внутренний отступ (padding), граница (border) и внешний отступ (margin). Размеры элемента по умолчанию определяются только его контентом, а padding, border и margin добавляются сверху.

Вопрос​

Как свойство box-sizing влияет на расчёт размеров элемента?

Ответ​

Свойство box-sizing определяет, как рассчитываются ширина и высота элемента:

  • content-box (значение по умолчанию): ширина и высота задают только область контента; padding и border увеличивают итоговый размер.
  • border-box: ширина и высота включают контент, padding и border; margin остаётся вне этого расчёта.

Рекомендуется использовать *, *::before, *::after { box-sizing: border-box; } для предсказуемого поведения макета.

Позиционирование​

Вопрос​

Какие значения принимает свойство position и чем они отличаются?

Ответ​

Свойство position может принимать следующие значения:

  • static — позиция по умолчанию; элемент следует обычному потоку документа.
  • relative — элемент смещается относительно своей исходной позиции, но место в потоке остаётся занятым.
  • absolute — элемент вынимается из потока и позиционируется относительно ближайшего предка с position, отличным от static.
  • fixed — элемент фиксируется относительно области просмотра и не прокручивается вместе со страницей.
  • sticky — гибрид relative и fixed: элемент ведёт себя как relative, пока не достигнет заданного порога прокрутки, после чего становится fixed.

Вопрос​

Как центрировать абсолютно спозиционированный элемент по горизонтали и вертикали?

Ответ​

Можно использовать комбинацию top: 50%, left: 50% и transform: translate(-50%, -50%):

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Этот метод работает независимо от размеров элемента.

Flexbox​

Вопрос​

Что такое Flexbox и для чего он используется?

Ответ​

Flexbox — это модуль CSS для создания гибких одномерных макетов (по строке или по колонке). Он автоматически распределяет пространство между элементами, обеспечивая адаптивное выравнивание даже при неизвестных или динамических размерах контента.

Вопрос​

Какие основные свойства применяются к flex-контейнеру?

Ответ​

Основные свойства flex-контейнера:

  • display: flex — делает элемент flex-контейнером.
  • flex-direction — задаёт направление главной оси (row, column, row-reverse, column-reverse).
  • justify-content — выравнивание по главной оси (flex-start, center, space-between и др.).
  • align-items — выравнивание по поперечной оси.
  • flex-wrap — управляет переносом элементов на новую строку (nowrap, wrap, wrap-reverse).

Вопрос​

Какие свойства применяются к flex-элементам?

Ответ​

Ключевые свойства flex-элементов:

  • flex-grow — определяет, насколько элемент растягивается, чтобы заполнить свободное пространство.
  • flex-shrink — определяет, насколько элемент сжимается при нехватке места.
  • flex-basis — задаёт начальный размер элемента до распределения свободного пространства.
  • Часто используется сокращённая запись: flex: 1 эквивалентно flex: 1 1 0.

CSS Grid​

Вопрос​

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

Ответ​

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

Вопрос​

Как создать базовую сетку с помощью CSS Grid?

Ответ​

Нужно задать контейнеру display: grid и определить размеры колонок и строк:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
}

Здесь три колонки: первая и третья занимают равную долю свободного пространства, вторая — вдвое больше; две строки: первая подстраивается под контент, вторая фиксированной высоты.

Вопрос​

Что делают свойства grid-column и grid-row?

Ответ​

Эти свойства определяют, через сколько колонок или строк должен простираться элемент. Например:

.item {
  grid-column: 1 / 3; /* занимает колонки с 1 по 2 */
  grid-row: 2 / 4;    /* занимает строки с 2 по 3 */
}

Можно также использовать ключевые слова: span 2 означает «занимать 2 колонки/строки от текущей позиции».

Вопрос​

Как выровнять элемент внутри своей ячейки сетки?

Ответ​

С помощью свойств justify-self (по горизонтали) и align-self (по вертикали). Для выравнивания всех элементов сразу используются justify-items и align-items на уровне контейнера.

Адаптивный и отзывчивый дизайн​

Вопрос​

В чём разница между адаптивным и отзывчивым дизайном?

Ответ​

Отзывчивый (responsive) дизайн использует гибкие сетки, изображения и медиазапросы, чтобы плавно подстраиваться под любой размер экрана. Адаптивный (adaptive) дизайн заранее определяет несколько фиксированных макетов для конкретных разрешений (например, 320px, 768px, 1024px) и выбирает подходящий при загрузке страницы.

Вопрос​

Что такое мобильный-first подход?

Ответ​

Мобильный-first — это методология проектирования, при которой сначала создаётся версия сайта для мобильных устройств, а затем с помощью медиазапросов добавляются улучшения для больших экранов. Это обеспечивает лучшую производительность, прогрессивное улучшение и фокус на основном контенте.

Вопрос​

Какие единицы измерения предпочтительны в адаптивном дизайне?

Ответ​

Предпочтительны относительные единицы:

  • rem — относительно корневого шрифта (html), удобен для масштабирования всей типографики.
  • em — относительно шрифта родительского элемента.
  • % — процент от размера родителя.
  • vw / vh — процент от ширины/высоты области просмотра.
  • fr — доля свободного пространства в Grid.

Использование px допустимо для границ или теней, но не рекомендуется для шрифтов и отступов в адаптивных макетах.

Медиазапросы​

Вопрос​

Как написать медиазапрос для планшетов в портретной ориентации?

Ответ​

Пример медиазапроса:

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* стили для планшетов в портретной ориентации */
}

Точные значения диапазонов могут варьироваться в зависимости от принятой дизайн-системы.

Вопрос​

Что такое mobile-first медиазапрос и как он выглядит?

Ответ​

Mobile-first медиазапрос использует min-width, расширяя стили по мере увеличения экрана:

/* Базовые стили — для мобильных */
.card { padding: 1rem; }

/* Улучшения для планшетов и выше */
@media (min-width: 768px) {
  .card { padding: 1.5rem; }
}

/* Улучшения для десктопов */
@media (min-width: 1024px) {
  .card { padding: 2rem; }
}

Типографика в вебе​

Вопрос​

Какие свойства CSS управляют внешним видом текста?

Ответ​

Основные типографические свойства:

  • font-family — список шрифтов, используемых для отображения текста.
  • font-size — размер шрифта.
  • font-weight — насыщенность (жирность) шрифта.
  • font-style — курсив (italic) или нормальное начертание (normal).
  • line-height — межстрочный интервал.
  • letter-spacing — расстояние между буквами.
  • text-align — выравнивание текста (left, center, right, justify).
  • color — цвет текста.

Вопрос​

Что такое системные шрифты и зачем их использовать?

Ответ​

Системные шрифты — это шрифты, предустановленные в операционной системе пользователя (например, San Francisco на macOS, Segoe UI на Windows, Roboto на Android). Их использование ускоряет загрузку страницы, так как не требует скачивания внешних файлов, и обеспечивает нативный внешний вид интерфейса. Пример:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

Вопрос​

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

Ответ​

Используется правило @font-face:

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2'),
       url('custom-font.woff') format('woff');
  font-display: swap;
}

Свойство font-display: swap обеспечивает немедленное отображение текста с резервным шрифтом, пока кастомный загружается, что улучшает воспринимаемую производительность.

Вопрос​

Что такое FOUT и FOIT?

Ответ​

FOUT (Flash of Unstyled Text) — кратковременное отображение текста резервным шрифтом до загрузки кастомного. FOIT (Flash of Invisible Text) — текст остаётся невидимым, пока не загрузится кастомный шрифт. Современные практики рекомендуют использовать font-display: swap, чтобы избежать FOIT и принять контролируемый FOUT.

Цветовые модели и палитры​

Вопрос​

Какие цветовые модели поддерживаются в CSS?

Ответ​

CSS поддерживает следующие модели:

  • Именованные цвета: red, blue, transparent.
  • HEX: #ff0000, #f00 (сокращённая форма).
  • RGB: rgb(255, 0, 0) или rgba(255, 0, 0, 0.8) с альфа-каналом.
  • HSL: hsl(0, 100%, 50%) или hsla(0, 100%, 50%, 0.8).
  • Системные ключевые слова: currentColor, inherit.

HSL особенно удобен для создания гармоничных палитр, так как позволяет интуитивно регулировать оттенок, насыщенность и яркость.

Вопрос​

Как создать контрастную и доступную цветовую схему?

Ответ​

Контраст между текстом и фоном должен соответствовать рекомендациям WCAG:

  • Уровень AA: контраст не менее 4.5:1 для обычного текста, 3:1 для крупного (≥18pt или ≥14pt жирного).
  • Уровень AAA: 7:1 для обычного текста, 4.5:1 для крупного.

Инструменты вроде WebAIM Contrast Checker помогают проверить соотношение. Также важно избегать передачи информации только через цвет — например, дополнять цветные индикаторы значками или текстом.

SVG и иконки​

Вопрос​

Почему SVG предпочтителен для иконок и простой графики?

Ответ​

SVG (Scalable Vector Graphics) — это векторный формат, основанный на XML. Он масштабируется без потери качества, имеет малый размер при простых фигурах, поддерживает стилизацию через CSS и анимацию через SMIL или JavaScript. Это делает его идеальным для логотипов, иконок и декоративных элементов.

Вопрос​

Как встроить SVG прямо в HTML?

Ответ​

Можно вставить SVG-код непосредственно в разметку:

<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

Это позволяет управлять цветом через fill: currentColor, анимировать отдельные части и улучшает производительность за счёт отсутствия HTTP-запроса.

Вопрос​

Как обеспечить доступность SVG-иконок?

Ответ​

Если иконка несёт смысловое значение:

  • Добавить <title> внутри SVG.
  • Использовать aria-labelledby для связи с заголовком.
  • Либо скрыть SVG через aria-hidden="true" и продублировать смысл текстом или aria-label на родительском элементе.

Для декоративных иконок достаточно aria-hidden="true" и focusable="false" (в старых версиях IE).

Анимации и переходы​

Вопрос​

В чём разница между transition и animation в CSS?

Ответ​

transition определяет плавное изменение свойств между двумя состояниями (например, при наведении). Он требует триггера — псевдокласса, класса или изменения атрибута.
animation позволяет создавать сложные последовательности ключевых кадров (@keyframes) без внешнего триггера и управлять воспроизведением: длительностью, задержкой, количеством повторов, направлением и т.д.

Вопрос​

Как создать простой hover-эффект с плавным изменением цвета?

Ответ​

Используется свойство transition:

.button {
  background-color: #007bff;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

Здесь цвет фона меняется за 0.3 секунды с эффектом замедления в конце (ease).

Вопрос​

Что такое @keyframes и как его использовать?

Ответ​

@keyframes определяет последовательность стилей для анимации. Пример:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

Можно также задавать промежуточные кадры в процентах: 0%, 50%, 100%.

Вопрос​

Какие свойства CSS лучше всего анимировать с точки зрения производительности?

Ответ​

Наиболее производительные свойства — те, которые не вызывают перерасчёт макета (layout) или перерисовку (paint), а затрагивают только композитинг. Это:

  • transform (включая translate, scale, rotate)
  • opacity

Анимация таких свойств выполняется на GPU и не блокирует основной поток.

Браузерная совместимость​

Вопрос​

Как обеспечить поддержку старых браузеров при использовании современных CSS-свойств?

Ответ​

Применяются следующие практики:

  • Использование постепенного улучшения: базовый функционал работает везде, улучшения добавляются для современных браузеров.
  • Проверка поддержки через @supports: 
    @supports (display: grid) {
      .container { display: grid; }
    }
  • Добавление вендорных префиксов при необходимости (хотя сейчас это редкость).
  • Использование автопрефиксеров в сборке (например, через PostCSS).

Вопрос​

Что такое прогрессивное улучшение и как оно применяется во фронтенде?

Ответ​

Прогрессивное улучшение — это стратегия разработки, при которой создаётся базовая версия сайта, работающая даже в старых или ограниченных средах, а затем добавляются улучшения для более мощных браузеров. Например, макет сначала реализуется через float или inline-block, а затем заменяется на Grid/Flexbox при поддержке.

Доступность (a11y)​

Вопрос​

Какие основные принципы доступности в веб-дизайне?

Ответ​

Основные принципы (по WCAG):

  • Воспринимаемость: информация должна быть представлена так, чтобы её могли воспринимать все пользователи (альтернативный текст, контраст, масштабируемость).
  • Управляемость: интерфейс должен быть полностью управляем с клавиатуры.
  • Понятность: содержимое и навигация должны быть предсказуемыми и ясными.
  • Надёжность: контент должен быть совместим с текущими и будущими вспомогательными технологиями.

Вопрос​

Как сделать кнопку доступной для пользователей клавиатуры и скринридеров?

Ответ​

Использовать семантический тег <button>, а не <div> с обработчиком клика. Убедиться, что:

  • У кнопки есть понятный текст или aria-label.
  • Она получает фокус (tabindex не требуется для <button>).
  • Визуальный индикатор фокуса виден (не убирать outline без замены).
  • Обработка события происходит по Enter и Space, а не только по click.

Вопрос​

Зачем нужен prefers-reduced-motion и как его использовать?

Ответ​

Некоторые пользователи отключают анимации из-за проблем с вестибулярным аппаратом или концентрацией. Медиазапрос prefers-reduced-motion позволяет уважать это предпочтение:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Это отключает или минимизирует анимации без поломки функциональности.

Производительность рендеринга​

Вопрос​

Какие этапы проходит браузер при отображении веб-страницы?

Ответ​

Основные этапы:

  1. Парсинг HTML → построение DOM.
  2. Парсинг CSS → построение CSSOM.
  3. Объединение DOM и CSSOM → формирование дерева рендеринга (render tree).
  4. Расчёт макета (layout) — определение геометрии каждого элемента.
  5. Покраска (paint) — заполнение пикселей цветом, текстурой, тенью.
  6. Композитинг (compositing) — объединение слоёв в окончательное изображение.

Оптимизация направлена на минимизацию работы на этапах layout и paint.

Вопрос​

Что такое критический путь рендеринга?

Ответ​

Критический путь рендеринга — это последовательность шагов, необходимых для первоначального отображения контента. Он включает загрузку HTML, CSS, JavaScript и построение render tree. Уменьшение времени критического пути ускоряет First Contentful Paint (FCP) и Largest Contentful Paint (LCP).

Вопрос​

Как уменьшить влияние CSS на производительность?

Ответ​

Рекомендации:

  • Минифицировать и сжимать CSS.
  • Разделять стили: критические (в <style> в <head>) и не критические (загружаются асинхронно).
  • Избегать сложных селекторов (div > ul li:nth-child(3) span замедляет парсинг).
  • Не использовать @import внутри CSS — он блокирует параллельную загрузку.
  • Удалять неиспользуемый CSS (например, с помощью PurgeCSS).

Вопрос​

Почему стоит избегать изменения свойств, вызывающих layout?

Ответ​

Свойства вроде width, height, top, left, margin, padding при изменении во время выполнения заставляют браузер пересчитывать положение всех затронутых элементов (reflow/layout). Это дорогостоящая операция, особенно в больших DOM-деревьях. Вместо этого предпочтительно анимировать transform и opacity, которые работают на уровне композитинга.

Методологии CSS​

Вопрос​

Что такое методология BEM и зачем она нужна?

Ответ​

BEM (Block, Element, Modifier) — это соглашение об именовании CSS-классов для повышения читаемости, модульности и предотвращения конфликтов. Структура:

  • Блок: независимый компонент (card).
  • Элемент: часть блока (card__title).
  • Модификатор: состояние или вариация (card--featured, card__title--large).

Пример:

<article class="card card--premium">
  <h2 class="card__title">Заголовок</h2>
</article>

Вопрос​

Какие преимущества даёт использование BEM?

Ответ​

  • Чёткая иерархия именования.
  • Независимость компонентов (низкая связанность).
  • Простота переиспользования.
  • Лёгкость поддержки и масштабирования.
  • Упрощение работы в команде благодаря единым правилам.

Вопрос​

Что такое ITCSS и как он структурирует CSS?

Ответ​

ITCSS (Inverted Triangle CSS) — это архитектурный подход, организующий стили в виде перевёрнутого треугольника по уровням специфичности и охвата:

  1. Settings — переменные.
  2. Tools — миксины, функции.
  3. Generic — сбросы (reset/normalize).
  4. Elements — стили для тегов без классов.
  5. Objects — абстрактные структуры (например, .o-layout).
  6. Components — конкретные UI-компоненты.
  7. Utilities — утилиты с !important (например, .u-hidden).

Это обеспечивает предсказуемый порядок применения стилей и контроль над каскадом.

Препроцессоры и современные инструменты​

Вопрос​

Что такое препроцессор CSS и зачем он нужен?

Ответ​

Препроцессор CSS — это язык, расширяющий возможности стандартного CSS с помощью переменных, вложенности, миксинов, функций и наследования. Код препроцессора компилируется в обычный CSS. Это повышает читаемость, поддерживаемость и переиспользуемость стилей.

Вопрос​

Какие основные возможности предоставляет Sass?

Ответ​

Sass (в синтаксисе SCSS) поддерживает:

  • Переменные: $primary-color: #333;
  • Вложенность: стили дочерних элементов пишутся внутри родителя.
  • Миксины: многократно используемые блоки кода (@mixin button-style { ... }).
  • Наследование через @extend.
  • Встроенные функции: lighten(), darken(), rgba().
  • Условия и циклы: @if, @for, @each.

Пример:

.button {
  padding: 0.5rem 1rem;
  @include border-radius(4px);
  
  &--primary {
    background: $primary-color;
  }
}

Вопрос​

В чём разница между Sass и Less?

Ответ​

Оба препроцессора предлагают похожие функции, но отличаются деталями:

  • Sass использует Ruby или Dart (Dart Sass — официальный), Less работает поверх JavaScript.
  • Sass поддерживает более мощные функции (например, списки, карты, продвинутые циклы).
  • Less проще в освоении для тех, кто уже знает CSS.
  • Sass имеет более активное сообщество и интеграцию с современными сборщиками.

Вопрос​

Что такое PostCSS и как он используется?

Ответ​

PostCSS — это инструмент для трансформации CSS с помощью плагинов. Он не является препроцессором сам по себе, но может выполнять аналогичные задачи. Популярные плагины:

  • autoprefixer — добавляет вендорные префиксы.
  • cssnano — минифицирует CSS.
  • postcss-preset-env — позволяет использовать будущие CSS-функции уже сегодня.

PostCSS часто встраивается в сборочные процессы (Webpack, Vite, Rollup).

CSS-in-JS​

Вопрос​

Что такое CSS-in-JS и где он применяется?

Ответ​

CSS-in-JS — это подход, при котором стили пишутся непосредственно в JavaScript-файлах, обычно внутри компонентов React. Библиотеки вроде styled-components, Emotion или JSS генерируют уникальные классы и внедряют стили в DOM. Это обеспечивает изоляцию стилей, динамическую темизацию и упрощённую передачу пропсов.

Вопрос​

Какие преимущества даёт CSS-in-JS?

Ответ​

  • Автоматическая изоляция стилей (без конфликтов классов).
  • Динамические стили на основе props или состояния.
  • Удаление неиспользуемых стилей (tree-shaking).
  • Лучшая интеграция с компонентной архитектурой.
  • Возможность использования JavaScript-логики внутри стилей.

Вопрос​

Какие недостатки у CSS-in-JS?

Ответ​

  • Увеличение размера бандла из-за runtime-библиотек.
  • Сложность отладки в DevTools (динамические имена классов).
  • Потенциальное снижение производительности при большом количестве компонентов.
  • Меньшая совместимость с инструментами анализа CSS (Lighthouse, Stylelint).
  • Необходимость обучения новому синтаксису.

Архитектура крупных проектов​

Вопрос​

Как организовать CSS в крупном проекте?

Ответ​

Рекомендуется комбинировать:

  • Архитектурную методологию (ITCSS, SMACSS).
  • Соглашение об именовании (BEM).
  • Компонентный подход (каждый компонент — отдельный файл стилей).
  • Использование CSS-переменных для темизации.
  • Разделение глобальных и локальных стилей.
  • Автоматизированная проверка через Stylelint.

Это обеспечивает масштабируемость, предсказуемость и простоту поддержки.

Вопрос​

Зачем использовать CSS-переменные (кастомные свойства)?

Ответ​

CSS-переменные (--color-primary: #007bff;) позволяют:

  • Централизованно управлять значениями (палитра, отступы, шрифты).
  • Реализовывать темы без перекомпиляции стилей.
  • Изменять значения динамически через JavaScript.
  • Наследоваться через DOM-дерево, как обычные CSS-свойства.

Пример темизации:

:root {
  --bg: white;
  --text: black;
}
[data-theme="dark"] {
  --bg: black;
  --text: white;
}
body {
  background: var(--bg);
  color: var(--text);
}

Инструменты разработки и анализ​

Вопрос​

Какие возможности предоставляют DevTools браузера для веб-дизайнера?

Ответ​

DevTools позволяют:

  • Инспектировать и редактировать HTML/CSS в реальном времени.
  • Просматривать вычисленные стили, блочную модель, наследование.
  • Эмулировать устройства, ориентации и состояния (hover, focus).
  • Измерять производительность: записи FPS, timeline, покрытие кода.
  • Анализировать доступность: контраст, ARIA-атрибуты, дерево доступности.
  • Отслеживать сетевые запросы, включая загрузку шрифтов и изображений.

Это основной инструмент для отладки и оптимизации интерфейсов.

Вопрос​

Как использовать Lighthouse для улучшения качества сайта?

Ответ​

Lighthouse — это инструмент аудита от Google, встроенный в Chrome DevTools. Он оценивает сайт по пяти категориям:

  • Производительность
  • Доступность
  • Лучшие практики
  • SEO
  • PWA

После запуска он даёт конкретные рекомендации: оптимизация изображений, устранение блокирующих ресурсов, улучшение контраста, добавление метатегов и т.д. Регулярное использование помогает поддерживать высокое качество интерфейса.

Вопрос​

Что такое покрытие CSS (Coverage) в DevTools и зачем оно нужно?

Ответ​

Функция Coverage показывает, какие строки CSS и JavaScript фактически использовались при загрузке и взаимодействии со страницей. Неиспользуемый код отмечается красным. Это помогает выявить и удалить мёртвый CSS, сократить размер файлов и ускорить загрузку.

Современные CSS-возможности​

Вопрос​

Что такое Container Queries и как они отличаются от медиазапросов?

Ответ​

Container Queries — это механизм, позволяющий применять стили к элементу в зависимости от размера его родительского контейнера, а не области просмотра. Это особенно полезно для компонентов, которые могут использоваться в разных контекстах (например, карточка в узкой боковой панели и в широкой сетке).

Пример:

.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card__title {
    font-size: 1.5rem;
  }
}

В отличие от медиазапросов, Container Queries делают компоненты truly responsive к своему окружению.

Вопрос​

Что такое View Transitions API и как он используется?

Ответ​

View Transitions API — это современный браузерный API, упрощающий создание плавных переходов между состояниями страницы (например, при навигации в SPA). Он автоматически фиксирует «до» и «после» состояния DOM и анимирует изменения без сложного ручного управления.

Пример:

document.startViewTransition(() => {
  // обновление DOM: смена контента, маршрута и т.д.
});

CSS предоставляет псевдоэлементы ::view-transition-old() и ::view-transition-new() для кастомизации анимации.

Дизайн-системы​

Вопрос​

Что такое дизайн-система и зачем она нужна?

Ответ​

Дизайн-система — это совокупность повторно используемых компонентов, руководств, принципов и токенов, обеспечивающих единый язык дизайна и разработки. Она включает:

  • Цветовые токены
  • Типографические шкалы
  • Отступы и сетки
  • UI-компоненты (кнопки, формы, карточки)
  • Правила взаимодействия и анимации

Цель — обеспечить согласованность, ускорить разработку и упростить масштабирование продукта.

Вопрос​

Как связаны дизайн-система и CSS-архитектура?

Ответ​

CSS-архитектура реализует принципы дизайн-системы в коде:

  • Токены преобразуются в CSS-переменные.
  • Компоненты реализуются как модульные стили с BEM или через CSS-in-JS.
  • Сетка и отступы стандартизируются через утилиты или миксины.
  • Темизация управляется централизованно.

Хорошая архитектура делает дизайн-систему живой, а не просто библиотекой в Figma.

UX-принципы для веб-дизайнеров​

Вопрос​

Какие базовые UX-принципы должен знать веб-дизайнер?

Ответ​

Ключевые принципы:

  • Ясность: пользователь всегда понимает, где он и что делать дальше.
  • Обратная связь: система немедленно реагирует на действия (анимации, состояния кнопок).
  • Согласованность: одинаковые элементы ведут себя одинаково во всём интерфейсе.
  • Минимизация когнитивной нагрузки: меньше решений, меньше текста, больше визуальных подсказок.
  • Ориентация на задачу: интерфейс помогает достичь цели с минимальными усилиями.

Вопрос​

Как проверить удобство использования макета до реализации?

Ответ​

Можно провести:

  • Анализ по эвристикам Нильсена — экспертная оценка по 10 принципам юзабилити.
  • Кликабельные прототипы в Figma или Adobe XD для тестирования потоков.
  • Тестирование с пользователями — наблюдение за реальными людьми при выполнении задач.
  • A/B-макеты — сравнение двух вариантов на раннем этапе.

Это позволяет выявить проблемы до написания кода и сэкономить ресурсы.

Освоение главы0%