Что такое вложенность CSS?

Введение

Если вы фронтенд-разработчик, работавший с препроцессором CSS, вы, вероятно, сталкивались или использовали функцию вложенности. Это популярная функция, и для меня она стала одной из тех, что побудила меня использовать препроцессор CSS.

В этом году поддержка вложенности CSS появилась во всех основных браузерах: Chrome, Firefox и Safari. Это ключевая функция CSS, упрощающая написание CSS-кода. В этой статье я расскажу о том, что я узнал о вложенности CSS, и поделюсь своими выводами, а также примерами использования.

Никаких предварительных условий нет, кроме вашего энтузиазма и сосредоточенности.

Вложенность в CSS — долгожданная функция для многих разработчиков. Раньше мы полагались на препроцессоры CSS, такие как Sass или Less. Позвольте мне кратко рассказать о них:

Рассмотрим следующий пример. У нас есть иконка, которая находится в селекторе .nav__item.

.nav__item {
.icon {
display: flex;
padding: 1rem;
}
}

Приведённый выше код является допустимым кодом Sass. После компиляции в браузере он будет выглядеть следующим образом:

.nav__item .icon {
display: flex;
padding: 1rem;
}

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

Обратите внимание, как браузер отображает CSS почти так же, как он отображается в CSS.

Если бы этот CSS-код был скомпилирован в Sass, браузер отобразил бы его следующим образом:

Преимущества вложенности CSS

На мой взгляд, существуют веские причины, по которым вложенные CSS-стили полезны:

• CSS легче читать.
• Группировка стилей
• Ограничение определенных стилей
• Стилизация HTML-элементов, не имеющих классов или идентификаторов.

Правила вложенности CSS

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

Прежде всего, вам нужно узнать о символе амперсанда (&). Существует ряд ситуаций, когда этот символ необходим.

Вложенность элемента без класса или идентификатора

В этом примере элемент <a> Оформление осуществляется с помощью `.nav__item`. Использование тега `&lt;head&gt;` необязательно для корректной работы CSS.

.nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* Same as: */
.nav__item a {
}

Вы также можете отказаться от проставления галочки:

.nav__item {
a {
display: block;
padding: 1.5rem 1rem;
}
}
/* Same as: */
.nav__item a {
}

Обратите внимание, что это недавнее обновление, и оно называется «Расслабленная вложенность CSS». Оно работает в последних версиях Chrome Canary и Safari Technology Preview. Ознакомьтесь с этой статьей об «Расслабленной вложенности» от Адама Аргила.

Вложенность элемента с классом

Рассмотрим тот же пример, что и раньше, но предположим, что элемент <a> В нём есть HTML-класс.

.nav__item {
.link {
display: block;
padding: 1.5rem 1rem;
}
}
/* Same as: */
.nav__item .link {
}

Здесь нет необходимости использовать символ. Имя класса подойдет идеально.

Вложенные CSS-комбинаторы

Одним из преимуществ нативной вложенности CSS является использование комбинаторов. Давайте рассмотрим несколько примеров.

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

В стандартной CSS-вложенности мы можем использовать символ амперсанда, чтобы имитировать его. Обратите внимание, что я повторил его дважды.

.nav__item {
& + & {
border-left: 2px solid;
}
}

Волшебство происходит во второй итерации амперсанда. Здесь браузер понимает, что я хочу использовать селектор соседнего элемента. Позвольте мне показать вам рисунок, демонстрирующий это:

Еще один пример вложенности — это комбинатор дочерних элементов. Он может выбирать непосредственного потомка элемента.

.nav__item {
> a {
padding: 1rem;
}
}

Символ амперсанда

.nav__item {
& a {
color: blue;
}
}

Это было необходимо в первоначальной спецификации вложенности CSS. В Safari TP 179+ и Chrome Canary 120 амперсанд больше не требуется для вложенных элементов.

В результате работает следующее:

.nav__item {
a {
color: blue;
}
}

Единственная проблема заключается в том, что вам придётся вернуться к предыдущей версии спецификации, которая должна включать разметку и соответствующие ей документы.

Вложенность с примером: Active, Focus, Hover

:active, :focus и :hover — это псевдоклассы CSS, которые активируются действиями пользователя.

С помощью вложенности CSS мы можем вкладывать их все одновременно, чтобы избежать дублирования кода. Возьмем в качестве примера :hover:

button {
&:hover {
background-color: var(--bg-color);
}
&:focus {
outline: solid 2px;
}
}

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

button:hover {
background-color: var(--bg-color);
}
button:focus {
outline: solid 2px;
}

Давайте посмотрим, как вложенность CSS отображается в Chrome, Safari и Firefox.

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

Пример вложенной структуры: публикация контента

Один из первых примеров тестирования вложенных CSS-стилей — это оформление основного содержимого публикации. Представьте себе статью с заголовками, текстом, изображениями, цитатами и многим другим.

Заголовки

Мы обычно оформляем заголовки следующим образом:

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
/* styles here */
}

С помощью вложенных CSS-стилей это проще:

.post-content {
h1,
h2,
h3,
h4 {
color: var(--heading-color);
font-weight: var(--heading-font-bold);
margin-bottom: var(--size-2);
}
}

То же самое можно сделать и с помощью селектора :is().

.post-content {
:is(h1, h2, h3, h4) {
color: var(--heading-color);
font-weight: var(--heading-font-bold);
margin-bottom: var(--size-2);
}
}

Элемент абзаца

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

.post-content {
& p {
color: var(--color-black);
& a {
font-weight: bold;
text-decoration: underline;
}
}
}

Для отображения ссылки также может потребоваться эффект наведения курсора или фокусировки.

.post-content {
& p {
color: var(--color-black);
& a {
font-weight: bold;
text-decoration: underline;
&:hover {
/* hover styles */
}
}
}
}

Мы также можем вкладывать медиа-запросы друг в друга.

.post-content {
& p {
/* base styles */
@media (min-width: 400px) {
/* do something */
}
}
}

В некоторых случаях CMS может быть элементом <p> Оберните его в другой элемент, и в целях стиля его следует использовать только для прямых элементов. <p> Создайте стиль.

.post-content {
/* Select the direct <p> elements */
> p {
/* base styles */
}
}

Блочная цитата

В этом примере цитата получает собственный стиль и элемент <p> Внутри цитаты выберите параметр, чтобы сбросить нижнее поле до нуля.

.post-content {
& blockquote {
/* custom quote styling */
& p {
margin-bottom: 0;
}
}
}

Форма столба

Форма для отправки сообщения содержит изображение и