Нативная вложенность CSS наконец появилась!

1. «Неофициальная» функция, которой мы пользовались десять лет

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

// Sass 语法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Много лет мы полагались на инструменты сборки, которые преобразовывали этот синтаксис в обычный CSS, понятный браузерам. Но теперь ситуация изменилась.

2. Появление нативной вложенности CSS

С начала 2023 года основные браузеры — Chrome, Safari и Firefox — один за другим объявили о поддержке нативного модуля CSS Nesting. Это означает, что вложенные правила можно писать непосредственно в файлах .css, без какой-либо предварительной обработки.

Приведенный выше пример на нативном CSS выглядит так:

/* 原生 CSS 语法 */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Да, он выглядит точно так же, как Sass!

3. Важная роль &

Как и в препроцессорах, символ & играет ключевую роль в нативной вложенности: он обозначает родительский селектор. Это особенно полезно при работе с псевдоклассами, псевдоэлементами и комбинированными селекторами.

.card {
  background: white;
  border-radius: 8px;

  /* & 代表 .card */
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* & 代表 .card，组合成 .card.dark-mode */
  &.dark-mode {
    background: #333;
  }

  /* & 代表 .card，组合成 .card > .header */
  > .header {
    font-weight: bold;
  }
}

4. Небольшое, но важное отличие от Sass

В Sass можно напрямую вложить селектор класса, например .card { .title { ... } }. Ранние версии спецификации нативного CSS Nesting этого не позволяли: каждое вложенное правило должно было начинаться с символа, такого как &, >, + или ~.

Хотя последняя версия спецификации смягчила это ограничение и разрешила напрямую вкладывать селекторы типа, например article { h1 { ... } }, при вложении селекторов классов по-прежнему рекомендуется использовать &, чтобы явно выразить намерение и избежать неоднозначности.

/* 推荐写法 */
.article {
  & .author-name {
    font-style: italic;
  }
}

/* 不推荐的写法 (在某些早期实现或严格解析器中可能无效) */
.article {
  .author-name {
    font-style: italic;
  }
}

Использование & ясно показывает, что .author-name является потомком .article.

5. Поддержка браузерами и будущее

К сентябрю 2023 года все основные современные браузеры — Chrome 112+, Safari 16.5+ и Firefox 117+ — поддерживали CSS Nesting. Это означает, что его можно постепенно внедрять в производственной среде.

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