Что нового в ЦСС: вложенность селекторов

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

Вложенность делает код нагляднее: раньше чтобы понять связи элементов приходилось внимательно вчитываться, теперь структуру и связи видно быстрее, уменьшается шум и повторы в коде:

РАНЬШЕ
.homepage {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

.homepage .sidebar {
  max-width: 320px;
}

.homepage .content {
  max-width: 768px;
}

.homepage .content .subscribe-banner {
  margin: 32px 0;
}

.article {
  padding-top: 25px;
  font-size: 18px;
}

.article h1 {
  color: purple;
}

.article p {
  max-width: 90%;
}

СЕЙЧАС
.homepage {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;

  .sidebar {
    max-width: 320px;
  }

  .content {
    max-width: 768px;

    .subscribe-banner {
      margin: 32px 0;
    }
  }
}

.article {
  padding-top: 25px;
  font-size: 18px;

  h1 {
    color: purple;
  }

  p {
    max-width: 90%;
  }
}

Внутри селектора можно использовать символ & как указатель на этот селектор. Так удобно создавать сложные слекторы, например, псевдоклассы и комбинации классов.

РАНЬШЕ
.nav-item {
  margin: 0;
}

.nav-item:not(:last-child) {
  margin-bottom: 30px;
}

.item-row {
  padding: 5px;
  border-radius: 12px;
  background: #f3f3f3;
}

.item-row + .item-row {
  margin-top: 18px;
}

.item-row.active {
  background: #ddd;
  font-size: 120%;
}

.item-row.disabled {
  opacity: .5;
  pointer-events: none;
}

СЕЙЧАС
.nav-item {
  margin: 0;

  &:not(:last-child) {
    margin-bottom: 30px;
  }
}

.item-row {
  padding: 5px;
  border-radius: 12px;
  background: #f3f3f3;

  & + & {
    margin-top: 18px;
  }

  &.active {
    background: #ddd;
    font-size: 120%;
  }

  &.disabled {
    opacity: .5;
    pointer-events: none;
  }
}

Медиавыражения. МДН

А ещё — вкладывать медиавыражения прямо внутрь селектора:

Медиавыражения. МДН

РАНЬШЕ
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

@media (width < 500px) {
  .page {
    font-size: 16px;
    grid-template-columns: 1fr;
  }
}

СЕЙЧАС
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;

  @media (width < 500px) {
    font-size: 16px;
    grid-template-columns: 1fr;
  }
}

CSS Nesting. Can I Use

На сентябрь 2025 вложенность поддерживает 90% браузеров.

CSS Nesting. Can I Use

С одной стороны, 90% — отличная поддержка. Оставшиеся 10% — это уже достаточно старые и экзотические браузеры. Обычно фичи с таким уровнем поддержки можно спокойно использовать в серьёзных «боевых» проектах.

С другой стороны, вложенность — фундаментальная фича, которая подразумевает полную переделку структуры ЦСС‑кода. Если вложенность не поддерживается в браузере, сломаются примерно все стили сайта.

Поэтому пока всё‑таки советую брать вложенность в серьёзные проекты с осторожностью. А вот потренироваться и поработать с ней на личном сайте или в пет‑проекте точно стоит уже сейчас, штука чудесная.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Рекомендуем другие советы

Свежак

Веб‑разработка

Интерфейс

Вдохновение

Визуализация

Вдохновение

Фронтенд и красота

Под капотом бюро