Вложенность в нативном CSS

Нативная вложенность CSS (доступна во всех современных браузерах с базовой поддержкой 2024 года) позволяет записывать правила CSS внутри других правил, повторяя синтаксис вложенности, который ранее был доступен только в препроцессорах Sass/Less. Вложенные правила автоматически наследуют контекст родительского селектора.

Записывайте дочерние селекторы внутри блока правила родителя. Браузер автоматически объединяет родительские и дочерние селекторы. Символ & (селектор вложенности) явно ссылается на родительский селектор для модификаторов и псевдоклассов.

& явно представляет родительский селектор во вложенных правилах. Используйте его для псевдоклассов (&:hover), псевдоэлементов (&::before), классов-модификаторов (&.active) и селекторов атрибутов (&[disabled]). Без & вложенные правила создают селекторы потомков.

Естественным образом вкладывайте правила псевдоэлементов внутрь родительского правила: .button { &::before { content: ""; } &::after { content: ""; } }. Так все стили кнопки находятся рядом, и не приходится повторять селектор, как в плоском CSS.

Медиазапросы и другие правила at-rule можно вкладывать внутрь правил (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Адаптивные стили находятся рядом с элементом, на который они влияют, а не в отдельном блоке медиазапроса в конце файла.

Вложенность не меняет правила специфичности — объединённый селектор имеет такую же специфичность, как и при записи без вложенности. .card .title, записанный с вложенностью или без неё, имеет одинаковую специфичность (0,2,0). Вложенность — это удобный синтаксис, а не изменение специфичности.

Вложенный селектор без & создаёт селектор потомка: .card { .title {} } преобразуется в .card .title. С &: .card { &.active {} } преобразуется в .card.active (без пробела — это класс-модификатор, а не потомок).

Нативная вложенность не идеально подходит для BEM: селекторы .block__element и .block--modifier являются строками, а одной операции с & недостаточно, чтобы создать их. Используйте вложенность для псевдоклассов и вложенных структур компонентов, а не для объединения строк BEM (для этого по-прежнему нужен препроцессор).

Большая часть синтаксиса вложенности Sass совпадает с нативной вложенностью CSS. Исключение: Sass поддерживает объединение строк с помощью &-modifier, а нативный CSS — нет. При переходе найдите шаблоны &- или &__ и преобразуйте именно эти правила в плоскую запись, сохранив остальную вложенность.

Нативная вложенность CSS поддерживается в Chrome 112+, Firefox 117+ и Safari 16.5+. Для поддержки старых браузеров используйте PostCSS с postcss-nesting, чтобы во время сборки преобразовывать нативный синтаксис вложенности в плоский CSS — это позволяет уже сейчас писать код с нативной вложенностью.

Chrome DevTools показывает вложенные правила на панели Styles в их вложенной форме. При нажатии на вложенное правило открывается соответствующее место в исходном коде на панели Sources. Отладка вложенного CSS в современных DevTools так же понятна, как отладка плоского CSS.

Чем отличается вложенность с селектором & от вложенности без него?

Нативная вложенность CSS добавляет в обычный CSS синтаксис вложенных правил, похожий на Sass. Селектор & создаёт составные селекторы для псевдоклассов, псевдоэлементов и модификаторов. Вложенные медиазапросы размещают адаптивные стили рядом с соответствующими элементами. PostCSS преобразует нативную вложенность для старых браузеров, что позволяет постепенно внедрять её уже сегодня.