Cos'è il nested CSS e come si usa?

Il CSS annidato nativo, attualmente in fase di bozza dal W3C, propone un'inclusione diretta della capacità di annidamento delle regole CSS nei fogli di stile standard. Questo significa che gli sviluppatori potrebbero organizzare i loro stili in una struttura gerarchica più intuitiva, senza il bisogno di preprocessori esterni come SASS o LESS.

I vantaggi di questo approccio includono una maggiore leggibilità del codice, una struttura che riflette visivamente il DOM, e la riduzione della ripetitività dei selettori, il che può rendere il codice più manutenibile. Inoltre, il nesting nativo permette agli sviluppatori di lavorare in un modo più modulare, organizzando i blocchi di stile in modo che siano logicamente collegati tra loro.

Supporto del selettore &

Per quanto riguarda il supporto, il selettore annidato & non è ancora ampiamente supportato nei browser come Chrome e Safari, il supporto è di base, ma non è supportato l'annidamento nell'annidamento. Questa caratteristica è centrale nel nesting nativo, permettendo di riferirsi al selettore padre all'interno di una regola annidata. Gli sviluppatori devono quindi fare affidamento su strumenti di trasformazione o sull'adozione di feature flags nei browser che supportano sperimentalmente questa funzionalità.

La specificità

La specificità nel CSS annidato nativo rimane una considerazione importante. Le regole annidate mantengono la loro specificità in base alla loro posizione e livello di annidamento, il che significa che le regole più interne avranno una priorità maggiore, similmente a quanto avviene con i preprocessori.

Le at-rule annidate

Infine, l'annidamento delle at-rule (come @media, @supports, e altre) segue lo stesso principio del nesting di selettori. Le at-rule possono essere annidate all'interno di blocchi di regole, permettendo una gestione più strutturata dei cambiamenti stilistici basati su condizioni come la larghezza della viewport o il supporto delle funzionalità del browser.

In conclusione, il CSS annidato nativo si propone di semplificare e migliorare l'organizzazione del codice CSS, ma la sua implementazione è ancora un lavoro in corso. È essenziale per gli sviluppatori rimanere informati sugli aggiornamenti relativi al supporto del browser e alle best practices, per poter sfruttare appieno le potenzialità di questa evoluzione del CSS non appena sarà pronta per un utilizzo esteso.

Ecco un esempio di come può essere usato il nested CSS:

Esempio di CSS annidato nativo con specificità e annidamento delle at-rule:

1/* Esempio di annidamento base con il selettore & */
2.nav-menu {
3  background: blue;
4  
5  & .item { /* Specificità: aumenta per il selettore .item annidato */
6    padding: 10px;
7    
8    &:hover { /* Specificità: ulteriormente aumentata per lo stato :hover */
9      background: darkblue;
10    }
11  }
12}
13
14/* Esempio di annidamento delle at-rule */
15.container {
16  display: grid;
17  
18  @media (max-width: 768px) { /* Annidamento di una at-rule */
19    display: block;
20    
21    .item { /* Annidamento all'interno di una at-rule */
22      padding: 5px;
23    }
24  }
25}
26
27/* Esempio di annidamento con specificità e at-rule */
28.card {
29  box-shadow: 0px 0px 5px grey;
30  
31  &:hover { /* Specificità per lo stato :hover del selettore .card */
32    box-shadow: 0px 0px 10px black;
33  }
34  
35  @supports (display: grid) { /* Annidamento di una at-rule basata sul supporto delle funzionalità del browser */
36    display: grid;
37    
38    .title { /* Annidamento di un selettore figlio all'interno di una at-rule */
39      grid-area: title;
40    }
41    
42    .content {
43      grid-area: content;
44    }
45  }
46}

In questi esempi, l'uso del selettore & indica il selettore genitore nel contesto dell'annidamento, e viene utilizzato per aumentare la specificità dei selettori annidati. L'annidamento di at-rule come @media e @supports permette di inserire direttive condizionali all'interno dei blocchi di regole, mantenendo un codice organizzato e facilmente mantenibile.

Tuttavia, è essenziale verificare la compatibilità di queste funzionalità con i browser attuali prima di utilizzarle in ambienti di produzione, poiché la proposta di annidamento nativo di CSS è ancora in fase di sviluppo e non è stata adottata universalmente.