Вложенные стили в CSS: руководство и примеры

Человек, держащий логотип CSS3

Краткая история и зачем это нужно

CSS долгое время считался громоздким при работе с крупными интерфейсами. Препроцессоры (Sass, Less, Stylus) добавили возможности вроде вложений, миксинов, циклов и функций — всё, что облегчало поддержку больших проектов. Со временем спецификация CSS частично «переняла» эти идеи: появились нативные вложенные правила, вложенные медиа-запросы и другие удобства.

Вложение позволяет структурировать правила так, чтобы визуально повторять HTML-иерархию. Это сокращает поиски селекторов и уменьшает количество повторов.

Вложенные стили: как это делали раньше

До появления нативного вложения разработчики писали селекторы «по-человечески», указывая иерархию в строке селектора:

.container {
  background-color: #f2f2f2;
}

.container h1 {
  font-size: 44px;
}

В препроцессорах вложение выглядело очевиднее:

.container {
  background-color: #f2f2f2;

  h1 {
    font-size: 44px;
  }
}

Такой синтаксис улучшал читаемость: сразу видно, какие элементы относятся к .container. Однако чрезмерная глубина вложения вела к громоздким селекторам и проблемам с поддержкой.

Нативные вложенные стили в CSS

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



  
    
    
    Nested Styling in CSS
  
  
    
      Hello from the children of planet Earth!

В этом примере браузер применит красный фон для .container, но правило для h1 внутри вложенного блока может не сработать так, как вы ожидаете. В нативном CSS рекомендуется явно ссылаться на родительский селектор с помощью амперсанда (&):

.container {
  background-color: red;

  & h1 {
    color: yellow;
  }
}

Здесь «&» обозначает весь родительский селектор (.container), поэтому & h1 разворачивается в .container h1.

Результат исправленного кода

Обратите внимание: с помощью «&» вы также можете таргетировать псевдо-классы и псевдоэлементы:

.parent1 {
  & :hover {
    background-color: red;
  }

  &::before {
    content: "Here is a pseudo element.";
  }
}

(внимание: пробел между & и :hover и между & и ::before в примере показан для читаемости; в реальном коде следите за пробелами, чтобы получить нужные селекторы, например & :hover vs &:hover.)

Вложение медиазапросов

Раньше медиазапросы писали отдельно:

p {
  color: black;
}

@media (min-width: 750px) {
  p {
    color: gray;
  }
}

Теперь можно вложить медиазапрос внутрь правила, что делает локальную адаптацию более очевидной:

p {
  color: black;

  @media (min-width: 750px) {
    color: gray;
  }
}

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

Практический пример: простой сайт с вложениями

Создайте папку с index.html и style.css. В index.html добавьте разметку:



  
    
    
    
    Simple Website
  
  
    
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        
          David Uzondu
          3 hours ago
        
        
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
          quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
          asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
          minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
          Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
          iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
          qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
          quae laudantium.
        
      
      
        Trending Articles
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!

А в style.css можно использовать вложения так:

.container {
  display: flex;
  gap: 25px;

  @media (max-width: 750px) {
    flex-direction: column;
  }

  .article {
    width: 90%;
  }

  & div:nth-child(3) {
    text-align: justify;
  }

  & span {
    color: rgb(67, 66, 66);

    &:nth-child(1)::before {
      font-style: italic;
      content: "Written by ";
    }

    &:nth-child(2) {
      font-style: italic;

      &::before {
        content: " ~ ";
      }
    }
  }

  .meta-data {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px;
  }
}

Скриншот готового сайта

Этот подход делает стиль статьи и её мета-данных локализованными внутри .container, что улучшает читабельность.

Нужен ли препроцессор теперь?

Короткий ответ: не всегда. Препроцессоры по-прежнему дают возможности, которых нет (или неудобно реализовывать) в нативном CSS: циклы, продвинутые миксины, контроль над генерацией классов и полифиллы специфичных паттернов. Если ваш стек уже использует Sass/Less и вы полагаетесь на их функции, полная миграция не обязательна.

Выбор зависит от задачи:

Для простых компонентных библиотек — нативного CSS с вложениями и кастомными свойствами часто хватает.
Для сложного динамического CSS (с генерацией повторяющихся правил) — препроцессор или CSS-in-JS всё ещё полезны.

Когда вложение может навредить — типичные ошибки

Чрезмерная глубина вложения увеличивает специфичность и усложняет переопределение стилей.
Вложенные селекторы могут «вырастать» в длинные комбинации, которые тяжело читать и фиксировать в отладчике.
Неправильная расстановка пробелов рядом с & приводит к другим селекторам (например, & h1 vs &>h1 vs &:hover), и это часто становится источником багов.
В проектах с глобальной CSS-архитектурой (BEM, ITCSS) вложения могут нарушать выбранную методологию, если не согласованы с командой.

Важно: перед массовым переходом прогоните правила через линтер и настройте ограничение глубины вложений (например, не больше 3 уровней).

Альтернативы и сочетания

Препроцессоры (Sass, Less) — если нужны mixin/loop/extend.
PostCSS с плагином postcss-nesting или postcss-nested — добавляют трансформации вложений для старых браузеров.
Утилитный подход (Tailwind) — уменьшает потребность в сложных селекторах.
CSS-in-JS — дает scoping и логику на уровне компонентов.
BEM и модульные классы — работают хорошо в больших командах, где важна предсказуемость селекторов.

Практическая методика миграции на вложения

Проанализируйте кодовую базу: найдите повторяющиеся группы селекторов.
Выделите минимальные компоненты (card, article, sidebar) и создайте локальные правила с вложениями.
Внедрите линтер с правилом на глубину вложения (например, max 2–3).
Покройте визуальные отличия тестами (см. раздел ниже) и визуально проверьте в браузерах.
При необходимости используйте PostCSS для обратной совместимости.

Контроль качества: тесты и критерии приёмки

Критерии приёмки:

Правильный рендер ключевых страниц на ширине экрана 320/768/1024/1366 px.
Отсутствие неожиданных изменений стилевого наследования после миграции.
Все интерактивные состояния (hover, focus) работают и не потеряли каскад.
Линтер не сообщает о превышении допустимой глубины вложений.

Простые тесты:

Сравнение скриншотов до/после (визуальный регресс-тест).
Автотесты на селекторы: проверка наличия конкретных computed стилей у DOM-элементов.

Чеклист ролей

Разработчик:

Настроить линтер и огранить глубину вложений.
Протестировать реестр компонентов в сторибуке или в локальной сборке.
Проверить специфичность и приоритеты селекторов.

Дизайнер:

Утвердить, какие элементы считаются локальными и могут использовать вложения.
Подтвердить визуальное соответствие после изменений.

Руководитель проекта:

Разрешить шаговую миграцию и выделить время на тестирование на мобилях.

Краткий словарь (1 строка)

Вложение: запись CSS-правил внутри других правил для отражения иерархии HTML.
&: амперсанд — ссылка на родительский селектор в контексте вложения.
Псевдокласс: :hover, :focus и т. п. — состояние элемента.
Псевдоэлемент: ::before, ::after — для генерации контента.
Медиазапрос: @media — адаптация стилей под условия.

Совместимость и рекомендации

Нативное вложение поддерживается в большинстве современных движков, но перед развёртыванием важно:

Проверять поддержку нужных фич в caniuse.com для целевых браузеров.
Использовать PostCSS с плагином для вложений, если требуется поддержка старых браузеров.
Настроить CI, который прогоняет автотесты и визуальный регресс.

Итог

Вложенные стили — мощный инструмент для повышения читаемости и локализации правил в компонентном CSS. Они не отменяют препроцессоры и другие подходы, но дают удобный и нативный способ писать более структурированные стили. Используйте вложение разумно: ограничивайте глубину, тестируйте поведение псевдо-классов и медиазапросов, и интегрируйте в существующую архитектуру стилей проекта.

Ключевые выводы:

Вложение упрощает поддержку и чтение CSS, но требует контроля специфичности.
Амперсанд (&) — критичный инструмент для правильного разрешения селекторов.
Для старых браузеров используйте PostCSS или сохраняйте препроцессор в пайплайне.
Настройте линтер и тесты при масштабной миграции.