La nidificazione (nesting) è una caratteristica che consente di scrivere CSS più leggibile e organizzato raggruppando gli stili in maniera gerarchica. Caratteristica fino ad ora disponibile solo tramite i preprocessori, come SCSS (Sass), ma di cui possiamo fare a meno grazie all?introduzione del CSS Nesting nativo. La funzionalità è in realtà già disponibile da più di un anno sui browser desktop moderni, ma solo di recente è stato raggiunto lo stesso livello di compatibilità per i browser mobile.

Portiamo un esempio semplice ma che fa denotare quanto questa nuova caratteristica sia fondamentale per vari punti

/* Espanso */
div.a > p {
    color: blue;
}
div span {
    color: orange;
}

/* Annidato */
div {
    &.a > p {
        color: blue
    }
    span {
        color: orange
    }
}

• Anche se le righe sono oggettivamente di più, a causa della brevità dell'esempio, ci accorgiamo di come il codice sia più leggibile e organizzato.


• Se abbiamo una minima conoscenza del linguaggio SCSS, più volte trattato in script precedenti, notiamo che non vi sono differenze sintattiche.
• Il supporto nativo rende la sua applicazione immediata senza l'utilizzo di strumenti esterni

In conclusione è importante ricordare che questa funzionalità non è ancora paragonabile ad un preprocessore in quanto non permette di utilizzare variabili, mixin, funzioni o altre funzionalità avanzate. Tuttavia, va a creare un livello intermedio tra i "due mondi" che permette di scrivere codice adatto per entrambi senza la necessità di affettuare alcuna modifica architetturale.