Natywne zagnieżdżanie CSS

Natywne zagnieżdżanie CSS (standard od 2024 roku, obsługiwany przez wszystkie nowoczesne przeglądarki) pozwala umieszczać reguły CSS wewnątrz innych reguł, odwzorowując składnię zagnieżdżania dostępną wcześniej wyłącznie w preprocesorach Sass/Less. Zagnieżdżone reguły automatycznie dziedziczą kontekst selektora nadrzędnego.

Selektory elementów potomnych należy zapisywać wewnątrz bloku reguły nadrzędnej. Przeglądarka automatycznie łączy selektory nadrzędne i potomne. & (selektor zagnieżdżania) jawnie odwołuje się do selektora nadrzędnego w przypadku modyfikatorów i pseudoklas.

& jawnie reprezentuje selektor nadrzędny w zagnieżdżonych regułach. Proszę używać go w przypadku pseudoklas (&:hover), pseudoelementów (&::before), klas modyfikatorów (&.active) i selektorów atrybutów (&[disabled]). Bez &, zagnieżdżone reguły tworzą selektory elementów potomnych.

Proszę zagnieżdżać reguły pseudoelementów bezpośrednio wewnątrz elementu nadrzędnego: .button { &::before { content: ""; } &::after { content: ""; } }. Dzięki temu wszystkie style przycisku znajdują się w jednym miejscu, bez powtarzania selektora wymaganego w płaskim CSS.

Zapytania media i inne reguły at można zagnieżdżać wewnątrz reguł (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Style responsywne znajdują się obok elementu, którego dotyczą, zamiast w osobnym bloku zapytania media na końcu pliku.

Zagnieżdżanie nie zmienia zasad specyficzności — połączony selektor ma taką samą specyficzność, jak gdyby został zapisany w sposób płaski. .card .title zapisany w sposób zagnieżdżony lub płaski ma taką samą specyficzność (0,2,0). Zagnieżdżanie jest tylko udogodnieniem składniowym, a nie zmianą specyficzności.

Zagnieżdżony selektor bez & tworzy selektor elementu potomnego: .card { .title {} } jest rozwijany do .card .title. Z użyciem &: .card { &.active {} } jest rozwijany do .card.active (bez spacji — jest to klasa modyfikatora, a nie element potomek).

Natywne zagnieżdżanie nie jest idealne dla BEM — selektory .block__element i .block--modifier są ciągami znaków, a samo & nie pozwala ich konstruować. Proszę używać zagnieżdżania w przypadku pseudoklas i zagnieżdżonych struktur komponentów, a nie do łączenia ciągów znaków BEM (do tego nadal potrzebny jest preprocesor).

Większość składni zagnieżdżania Sass jest identyczna z natywnym zagnieżdżaniem CSS. Wyjątkiem jest konkatenacja ciągów znaków &-modifier, której natywny CSS nie obsługuje. Podczas migracji należy wyszukać wzorce &- lub &__ i spłaszczyć tylko te konkretne reguły, zachowując pozostałe zagnieżdżenia.

Natywne zagnieżdżanie CSS jest obsługiwane w Chrome 112+, Firefox 117+ i Safari 16.5+. W przypadku starszych przeglądarek można użyć PostCSS wraz z postcss-nesting, aby podczas budowania przekształcać natywną składnię zagnieżdżania w płaski CSS — dzięki temu można już teraz pisać w natywnym zagnieżdżaniu.

Chrome DevTools wyświetla zagnieżdżone reguły w panelu Styles w ich zagnieżdżonej postaci. Kliknięcie zagnieżdżonej reguły przenosi do właściwego miejsca w kodzie źródłowym w panelu Sources. Debugowanie zagnieżdżonego CSS jest równie przejrzyste jak debugowanie płaskiego CSS w nowoczesnych DevTools.

Jaka jest różnica między zagnieżdżaniem z selektorem & a zagnieżdżaniem bez niego?

Natywne zagnieżdżanie CSS umożliwia stosowanie składni zagnieżdżonej podobnej do Sass w zwykłym CSS. Selektor & tworzy selektory złożone dla pseudoklas, pseudoelementów i modyfikatorów. Zagnieżdżone zapytania @media umieszczają style responsywne obok elementów, których dotyczą. PostCSS przekształca natywne zagnieżdżanie na potrzeby starszych przeglądarek, umożliwiając stopniowe wdrażanie tej funkcji już teraz.