Нативный CSS Nesting: пишем вложенность без препроцессоров
Долгое время одной из главных причин использования препроцессоров, таких как Sass или Less, была возможность написания вложенных селекторов. Это позволяло структурировать код более логично, повторяя иерархию HTML-документа. Теперь эта возможность стала частью официального стандарта CSS и поддерживается всеми современными браузерами.
Зачем это нужно
Нативный CSS Nesting позволяет разработчикам писать более компактный и читаемый код. Основные преимущества включают в себя:
Уменьшение дублирования кода: больше не нужно многократно повторять имена родительских классов для каждого дочернего элемента.
Улучшение структуры: стили логически сгруппированы, что облегчает навигацию по файлу и понимание связей между компонентами.
Отказ от лишних инструментов: для небольших и средних проектов можно исключить стадию компиляции Sass, используя чистый CSS напрямую в браузере.
Удобство поддержки: при изменении имени родительского класса правки вносятся только в одном месте.
Базовый синтаксис
В нативном CSS вложенность работает интуитивно понятно. Вы просто помещаете селектор дочернего элемента внутрь фигурных скобок родителя. Рассмотрим пример оформления карточки товара:
.product-card {
background: #ffffff;
border: 1px solid #ddd;
.product-title {
font-size: 1.2rem;
color: #333;
}
.product-price {
color: green;
font-weight: bold;
}
}
В этом примере селекторы будут интерпретированы браузером как .product-card .product-title и .product-card .product-price. Современные браузеры автоматически определяют начало вложенного правила, если оно начинается с символа класса (.), идентификатора (#) или других спецсимволов.
Использование символа амперсанда
Символ & играет ключевую роль, когда нужно сослаться на родительский селектор без пробела. Это необходимо для работы с псевдоклассами, псевдоэлементами и модификаторами классов.
.button {
background-color: blue;
color: white;
&:hover {
background-color: darkblue;
}
&::before {
content: «★»;
}
&.is-disabled {
opacity: 0.5;
pointer-events: none;
}
}
Здесь & превращается в имя родителя, формируя селекторы .button:hover, .button::before и .button.is-disabled соответственно.
Вложенные медиа-запросы
Одной из самых полезных функций является возможность вкладывать правила @media непосредственно внутрь селектора элемента. Это избавляет от необходимости создавать отдельные блоки адаптивности в конце CSS-файла, разрывая контекст стилизации компонента.
.sidebar {
display: none;
@media (min-width: 1024px) {
display: block;
width: 300px;
}
}
Такой подход делает код компонента самодостаточным и упрощает его перенос между проектами.
Отличия от препроцессоров
Несмотря на внешнее сходство с Sass, нативный CSS имеет свои особенности. Важно помнить о следующих моментах:
Конкатенация строк: В Sass можно написать .block { &__element {} }, чтобы получить .block__element. В нативном CSS это невозможно — амперсанд должен представлять законченный селектор, а не часть строки.
Специфичность: Нативный Nesting вычисляет специфичность иначе, чем простая цепочка селекторов в Sass, что в редких случаях может влиять на приоритет применения стилей.
Производительность: Поскольку парсинг происходит на стороне браузера, сложные и глубокие вложенности могут теоретически влиять на скорость отрисовки, хотя для 99% проектов это не будет заметно.
Поддержка браузерами и будущее
На сегодняшний день спецификация CSS Nesting Module имеет отличную поддержку. Все «вечнозеленые» браузеры (Chrome 112+, Firefox 117+, Safari 16.5+) уже понимают этот синтаксис. Для поддержки пользователей со старым софтом разработчики часто используют PostCSS с плагином postcss-nesting, который транспилирует современный код в классический вид.
Заключение
Нативная вложенность — это долгожданный стандарт, который делает CSS более мощным и удобным инструментом. Она позволяет писать чистый, организованный код без необходимости настройки сложных сборок. Если ваш проект ориентирован на современных пользователей, самое время начать использовать вложенность без препроцессоров.