Nesting CSS nativo

Il CSS Nesting nativo (baseline 2024, supportato da tutti i browser moderni) consente di scrivere regole CSS all'interno di altre regole, riproducendo la sintassi di annidamento precedentemente disponibile solo nei preprocessori Sass/Less. Le regole annidate ereditano automaticamente il contesto del selettore genitore.

Scriva i selettori figli all'interno del blocco di una regola genitore. Il browser combina automaticamente i selettori genitore e figlio. Un & (selettore di annidamento) fa riferimento esplicito al selettore genitore per modificatori e pseudoclassi.

& rappresenta esplicitamente il selettore genitore nelle regole annidate. Lo utilizzi per pseudoclassi (&:hover), pseudoelementi (&::before), classi modificatrici (&.active) e selettori di attributo (&[disabled]). Senza &, le regole annidate creano selettori discendenti.

Annidi naturalmente le regole dei pseudoelementi all'interno del genitore: .button { &::before { content: ""; } &::after { content: ""; } }. In questo modo tutti gli stili del pulsante restano riuniti, evitando la ripetizione dei selettori richiesta dal CSS non annidato.

Le media query e le altre at-rule possono essere annidate all'interno delle regole (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Gli stili reattivi restano accanto all'elemento a cui si applicano, invece di trovarsi in un blocco di media query separato alla fine del file.

L'annidamento non modifica le regole della specificità: il selettore combinato ha la stessa specificità che avrebbe se fosse scritto senza annidamento. .card .title, scritto in forma annidata o non annidata, ha la stessa specificità (0,2,0). L'annidamento è una comodità sintattica, non una modifica della specificità.

Un selettore annidato senza & crea un selettore discendente: .card { .title {} } viene compilato in .card .title. Con &: .card { &.active {} } viene compilato in .card.active (senza spazio: è una classe modificatrice, non un discendente).

L'annidamento nativo non è ideale per BEM: i selettori .block__element e .block--modifier sono stringhe e l'annidamento da solo non può costruirli con &. Utilizzi l'annidamento per pseudoclassi e strutture di componenti annidate, invece che per la concatenazione di stringhe BEM, che richiede ancora un preprocessore.

La maggior parte della sintassi di annidamento di Sass è identica a quella dell'annidamento nativo di CSS. Le eccezioni riguardano la concatenazione di stringhe &-modifier, che il CSS nativo non supporta. Per eseguire la migrazione, verifichi la presenza dei pattern &- o &__ e appiattisca quelle regole specifiche, mantenendo il resto dell'annidamento.

Il CSS Nesting nativo è supportato da Chrome 112+, Firefox 117+ e Safari 16.5+. Per supportare i browser meno recenti, utilizzi PostCSS con postcss-nesting per trasformare la sintassi dell'annidamento nativo in CSS non annidato durante la build, così da poterlo scrivere già oggi con la sintassi nativa.

Chrome DevTools mostra le regole annidate nel pannello Styles, mantenendone la forma annidata. Facendo clic su una regola annidata si passa alla posizione corretta del codice sorgente nel pannello Sources. Nei DevTools moderni, il debug del CSS annidato è chiaro quanto quello del CSS non annidato.

Qual è la differenza tra l'annidamento con e senza il selettore &?

Il CSS Nesting nativo consente di utilizzare una sintassi annidata simile a quella di Sass nel CSS semplice. Il selettore & crea selettori composti per pseudoclassi, pseudoelementi e modificatori. Le media query annidate mantengono gli stili reattivi accanto agli elementi a cui si applicano. PostCSS trasforma l'annidamento nativo per i browser meno recenti, consentendone l'adozione graduale già oggi.