Что такое CSS

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

На интервью можно ответить так:

CSS это язык стилей для веб-документов. Он отделяет внешний вид от HTML-структуры и позволяет управлять layout, цветами, типографикой, адаптивностью, состояниями и анимациями. Итоговый стиль выбирается по правилам каскада, поэтому важно понимать специфичность, наследование и порядок объявлений.

Не останавливайтесь на фразе про красивую страницу. Она не ошибочная, но для Frontend Developer звучит слишком слабо. CSS влияет на поддержку компонентов, адаптивность, доступность, производительность отрисовки и предсказуемость интерфейса.

Упрощенно браузер читает HTML и строит DOM, читает CSS и строит CSSOM, затем объединяет их для расчета стилей и раскладки. После этого браузер рисует элементы на экране. Поэтому CSS это не просто файл рядом с HTML, а часть процесса рендера.

Если правило конфликтует с другим правилом, браузер не выбирает случайно. Он проходит через каскад: учитывает важность объявления, происхождение стиля, cascade layers, специфичность и порядок. Поэтому два похожих правила могут дать неожиданный результат, если вы не видите весь контекст. Еще важно помнить про inherited-значения: часть свойств приходит от родителя, а не из правила на самом элементе.

Практический вывод простой. Когда стиль не применился, не усиливайте селектор автоматически и не добавляйте !important первым движением. Сначала посмотрите в DevTools, какое правило победило и почему. Так вы чините причину, а не создаете новый конфликт.

Пример маленького, но показательного CSS:

.button {
  border: 0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: white;
  font: inherit;
  cursor: pointer;
}

.button:hover {
  background: var(--color-primary-hover);
}

.button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .button {
    width: 100%;
  }
}

Здесь видно несколько ролей CSS сразу. Базовый класс задает внешний вид, :hover и :focus-visible описывают состояния, переменные помогают не дублировать цвета, а media query меняет поведение на маленьком экране.

Плохой вариант, убрать фокус ради красоты или задать кнопку фиксированной ширины в пикселях без проверки мобильного экрана. Пользователь с клавиатурой потеряет текущее положение, а на узком экране кнопка может вылезти за контейнер. Безопаснее оставить заметный :focus-visible, использовать относительные единицы, min-width, max-width и проверять перенос текста.

Эти три слова часто звучат рядом, но отвечают за разные вещи.

Каскад выбирает итоговое значение, когда на элемент действует несколько объявлений. Специфичность помогает сравнить селекторы. Наследование передает некоторые свойства от родителя к потомкам, например цвет текста или шрифт, но не все свойства наследуются автоматически.

На интервью можно сформулировать так:

Если несколько CSS-правил подходят к одному элементу, итог зависит от каскада. Я смотрю на важность, слой, специфичность и порядок. При этом часть свойств наследуется от родителей, поэтому иногда значение появляется не из правила на самом элементе, а из контекста.

Такой ответ лучше, чем одна заученная формула веса селекторов. Формулы помогают, но в реальной отладке важен полный порядок принятия решения.

На интервью не обязательно перечислять все современные возможности CSS. Лучше выбрать несколько и показать, зачем они нужны. Flexbox и Grid решают layout-задачи, custom properties помогают с темизацией и дизайн-токенами, media queries и container queries помогают с адаптивностью, transitions и animations дают визуальные переходы без лишнего JavaScript. Если задачу можно решить CSS, не стоит сразу писать обработчик resize в JavaScript: он добавляет состояние, риск лишних перерасчетов и cleanup, который легко забыть.

Слабый ответ звучит как список терминов. Сильнее работает связка: инструмент, задача, ограничение. Например, Grid удобен для сетки карточек, но для выравнивания элементов внутри одной строки вы чаще выберете Flexbox.

CSS-ошибки часто выглядят не как падение приложения, а как плохой пользовательский опыт. Кнопка может уехать на мобильном экране, текст может стать нечитаемым из-за контраста, фокус может исчезнуть для клавиатурной навигации, модальное окно может неправильно перекрывать страницу из-за z-index и stacking context. В React-приложении это часто выглядит так: логика работает, но UI врет. Активный элемент не виден, skeleton дергает layout, toast перекрывает форму или ошибка спрятана ниже видимой области.

Еще одна частая проблема, хрупкая архитектура. Если стили завязаны на глубокую вложенность DOM, любое изменение разметки ломает внешний вид. Если в проекте много !important, команда тратит время не на развитие интерфейса, а на борьбу с переопределениями.

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