Вложенность

Вложенность пронизывает всю фронтенд-разработку. HTML-документ — дерево, где каждый тег вложен в родителя. Функции вкладываются в функции, объекты — в объекты, компоненты интерфейса — в другие компоненты. Понять структуру кода — во многом значит понять, что во что вложено. Отношения «родитель — потомок» описаны в статье про родительский элемент.

Долгое время в CSS вложенности не было: каждое правило писали с полным селектором от корня. Её добавили препроцессоры Sass и Less, и она стала одной из главных причин их популярности. Теперь вложенные правила понимают сами браузеры — поддержка появилась во всех основных браузерах в 2023 году.

Пример: нативная вложенность в CSS

.card {
  padding: 16px;

  & h3 { margin-top: 0; }
  &:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 0.15); }

  @media (min-width: 768px) {
    padding: 24px;
  }
}

Символ & обозначает родительский селектор. Внутрь правила можно вкладывать и медиазапросы — стили для разных экранов оказываются рядом с основными.

Отличия от препроцессоров

Синтаксис похож на Sass, но не совпадает. В браузерном CSS нельзя склеивать имена: запись &__title для БЭМ-классов работает только в препроцессоре. Кроме того, браузер вычисляет вложенный селектор по правилам :is(), и специфичность в отдельных случаях получается выше, чем у той же конструкции после компиляции Sass.

Сколько уровней — это много

Глубокая вложенность в CSS порождает длинные специфичные селекторы вроде .page .content .catalog .item .title a. Их трудно перебить и невозможно переиспользовать: блок, перенесённый в другое место страницы, теряет стили. Распространённое правило — не больше трёх уровней. В HTML лишние обёртки утяжеляют дерево DOM и замедляют пересчёт стилей; конструкторы страниц нередко создают по пять-шесть вложенных div на каждую кнопку. В JavaScript глубокая вложенность условий и колбэков ухудшает читаемость — её уменьшают ранними выходами из функций и async/await.