CSS Nesting: вложенность без препроцессоров

Я уже более 10 лет работаю веб-разработчиком. За это время я успел поработать с препроцессорами вроде Sass и Less, но сегодня хочу рассказать о долгожданной нативной возможности CSS, а именно вложенности (Nesting). Больше не нужны костыли! Давайте разберемся, как использовать синтаксис & в ванильном CSS, какие преимущества это дает и как перейти на «чистый» код без потери функциональности.

Почему CSS Nesting это важно?

Раньше вложенность была прерогативой препроцессоров. Мы писали:

.parent {
  color: red;
  .child { 
    font-size: 16px; 
    &:hover { color: blue; }
  }
}

Но теперь браузеры поддерживают это нативно! Зачем?

• Уменьшение повторения селекторов.
• Улучшение читаемости — код структурируется как HTML.
• Отказ от компиляции — стили работают «из коробки».

Синтаксис & и его применение в нативных стилях

Базовый пример

Раньше:

.parent { color: red; }
.parent .child { font-size: 16px; }
.parent:hover { background: #eee; }

С вложенностью:

.parent {
  color: red;

  .child {
    font-size: 16px;
  }

  &:hover {
    background: #eee;
  }
}

Ключевой момент: & заменяется на родительский селектор.

Варианты использования &

1. Вложенность элементов

Позволяет группировать стили по блокам.

.card {
  padding: 20px;

  .title {
    font-weight: 700;
  }

  .description {
    color: #666;
  }
}

2. Модификаторы и состояния

.button {
  background: blue;

  &--disabled {
    opacity: 0.5;
  }

  &.active {
    border: 2px solid green;
  }
}

3. Псевдоклассы и псевдоэлементы

.list-item {
  &:hover {
    background: #f5f5f5;
  }

  &::before {
    content: "•";
    margin-right: 8px;
  }
}

4. Комбинации с медиа-запросами

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 50%;
  }
}

Сравнение с препроцессорами

Вывод: Нативный nesting идеален для новых проектов, но в legacy-коде Sass пока полезнее.

Как начать использовать CSS Nesting

Шаг 1. Проверьте поддержку браузеров

Если ваш проект должен работать в старых версиях Chrome (< 112) или Safari (< 16.5), подключите полифиллы через PostCSS:

npm install postcss-preset-env --save-dev

Настройте postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      features: { 'css-nesting': true }
    })
  ]
};

Шаг 2. Рефакторинг кода

Постепенно заменяйте конструкции вроде:

/* Было */
.parent .child { ... }

/* Стало */
.parent {
  .child { ... }
}

Шаг 3. Избегайте избыточной вложенности

Не превращайте CSS в «матрешку»:

/* Плохо */
.card {
  .content {
    .title {
      .icon { ... }
    }
  }
}

/* Хорошо */
.card .title {
  .icon { ... }
}

Рекомендации

1. Используйте @nest для сложных случаев
   Если & не работает интуитивно, явно укажите родителя:
   css

   .parent {
     @nest .dark-theme & {
       background: #333;
     }
   }

2. Комбинируйте с CSS-переменными
   css

   :root { --primary: blue; }
   
   .button {
     background: var(--primary);
   
     &:hover {
       background: color-mix(in srgb, var(--primary) 80%, black);
     }
   }

3. Тестируйте в старых браузерах
   Даже с полифиллами возможны ошибки специфичности.

Будущее CSS Nesting

Спецификация CSS продолжает развиваться. В планах:

• Вложенность @keyframes и @layer.
• Автоматическое разрешение конфликтов специфичности.

CSS Nesting это не просто синтаксический сахар, а шаг к более чистому и поддерживаемому коду. Уже сегодня можно отказываться от препроцессоров в новых проектах, а в существующих внедрять постепенно.