Нативный CSS nesting: вложенность без препроцессора

Разработчики давно полюбили Sass и Less за вложенные правила. Вместо того чтобы писать длинные селекторы много раз, можно было аккуратно вложить дочерние стили внутрь родительских. В 2024 году это умение получил сам CSS — никаких препроцессоров больше не нужно.

Как выглядит вложенность

Раньше, без препроцессора, приходилось повторять родительский селектор:

.card { background: white; }
.card .title { font-size: 20px; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.card .btn { padding: 8px 16px; }
.card .btn:hover { background: darkblue; }

С нативным нестингом это выглядит компактнее и читается как дерево:

.card {
  background: white;

  .title {
    font-size: 20px;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
  }

  .btn {
    padding: 8px 16px;

    &:hover {
      background: darkblue;
    }
  }
}

Символ &

Амперсанд & — ключевой символ в нестинге. Он означает «текущий родительский селектор». Без него вложенный селектор добавляется через пробел (потомок). С ним — склеивается напрямую:

.btn {
  /* .btn:hover — псевдокласс */
  &:hover { opacity: .8; }

  /* .btn--primary — модификатор */
  &--primary { background: blue; }

  /* .dark .btn — родитель с классом */
  .dark & { color: white; }
}

Попробуйте сами

@media и @layer внутри правил

Нестинг работает и с at-правилами. Это особенно удобно для медиазапросов — больше не нужно держать брейкпоинты в конце файла:

.sidebar {
  width: 260px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

Раньше такое было только в Sass. Теперь это нативный CSS.

При нативном нестинге без & вложенный селектор неявно оборачивается в :is(). Это важно: :is() берёт специфичность самого специфичного своего аргумента. На практике в большинстве случаев это не вызывает проблем, но при отладке стоит помнить об этой особенности.

Нативный CSS nesting поддерживается во всех современных браузерах начиная с 2023–2024 годов: Chrome 112+, Firefox 117+, Safari 16.5+. Для большинства проектов уже можно использовать без оглядки на совместимость.

Таким образом, нативный CSS nesting позволяет вкладывать правила друг в друга прямо в CSS — так же, как в Sass, но без компиляции. Символ & ссылается на родительский селектор, а @media внутри правила описывает адаптивность прямо рядом с базовыми стилями.