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

CSS

Быстрый переход к обучению​

  1. HTML и CSS — учебный модуль
  2. Все учебные модули

Что нужно знать​

  1. Каскад, специфичность, наследование, !important.
  2. Layout-системы: Flexbox, Grid, позиционирование.
  3. Box model и влияние box-sizing.
  4. Адаптивность: media queries, fluid units (rem, %, vw).
  5. Производительность: repaint/reflow-факторы и влияние сложных стилей.

Что уметь объяснить на собеседовании​

  1. Как выбрать Flexbox или Grid под конкретный layout.
  2. Почему не применился стиль и как это дебажить.
  3. Как построить адаптив без дублирования CSS.
  4. Что в CSS реально бьет по рендерингу.

Грейд-фокус​

  1. Junior: базовый каскад, layout, отладка типовых визуальных багов.
  2. Middle: сложные сетки, адаптивная система компонентов, устойчивые naming-конвенции.
  3. Senior: дизайн-система, токены, производительность стилей и операционные стандарты команды.

Глубокие кейсы собеседования​

  1. Стиль не применился: сильный ответ: проверить specificity, порядок подключения, scope (CSS modules), inline-style.

  2. Ломается адаптив на планшетах: сильный ответ: анализ контейнеров, min/max-ограничений, overflow и поведения flex/grid при промежуточных ширинах.

  3. Медленный скролл на длинной странице: сильный ответ: проверить тяжелые эффекты (filter, backdrop-filter, большие box-shadow), частые layout-пересчеты.

Практический минимум​

  1. Сверстать карточку товара тремя способами layout.
  2. Написать отладочный алгоритм для ломающейся специфичности.
  3. Реализовать responsive-страницу для 3 breakpoints.
  4. Устно объяснить 5 частых CSS-багов и их фиксы.

Типовые ловушки​

  1. Лечить все через !important.
  2. Путать visibility, display, opacity.
  3. Игнорировать контекст стэкинга (z-index без stacking context).
  4. Делать адаптив только под несколько фиксированных разрешений.

Self-review перед собеседованием​

  1. Я могу объяснить каскад на конкретном конфликте стилей.
  2. Я понимаю, когда Grid лучше Flex и наоборот.
  3. Я умею быстро дебажить overflow и проблемы stacking context.
  4. Я могу связать CSS-решение с производительностью рендера.

Связанные материалы​

  1. HTML
  2. Рендеринг веб-страницы
  3. Junior JavaScript

Архивный монолит​

Полный старый материал: CSS (архив)