Вложенные стили в CSS
Важно: нативная вложенность похожа на синтаксис препроцессоров, но поведение селектора отличается — обязательно применяйте & при ссылке на родителя.
Ключевые варианты запроса
- вложенные стили в CSS
- nested css
- вложенность в CSS без препроцессора
- & селектор в CSS
- вложенные медиа-запросы
Введение
Исторически CSS воспринимался как неудобный для масштабирования язык: отсутствовали переменные, функции и удобные структуры. Препроцессоры (Sass, Less, Stylus) добавили удобства — вложенность, миксины, циклы. Со временем сам CSS заимствовал ряд идей из препроцессоров. Одна из таких идей — вложенные стили.
Вложенность позволяет группировать правила по структуре HTML. Это делает код более организованным: визуально видно, какие элементы относятся к какому контейнеру.
Вложенные стили: старый/классический способ
Вложенность была доступна в препроцессорах вроде Sass и Less. Смысл одинаков: описать отношения «родитель — потомок» компактно. В обычном CSS для оформления всех h1 внутри .container нужно было писать так:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
В препроцессоре (например, Less) та же логика выглядела короче:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Преимущество — явная иерархия. Глубину вложенности можно увеличивать, но чрезмерная вложенность ухудшает поддержку и может привести к излишне специфичным селекторам.
Нативная вложенность в CSS
Нативная вложенность работает похоже на препроцессоры, но с важной разницей: при обращении к дочернему элементу прямо по имени браузер не всегда правильно понимает контекст. Рассмотрим пример полного HTML-файла:
Nested Styling in CSS
Hello from the children of planet Earth!