🧩 CSS Nesting: scrivere fogli di stile più puliti e leggibili

🔍 Cos’è il CSS Nesting

Tradizionalmente, in CSS ogni selettore va scritto separatamente.
Ad esempio, se vogliamo stilizzare una lista di navigazione con i suoi link, scriviamo qualcosa come:

nav {
  background-color: #222;
}

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  color: white;
  text-decoration: none;
}

Questo approccio funziona, ma diventa presto verboso e difficile da mantenere, soprattutto in progetti grandi.
Con il CSS nesting, possiamo “annidare” le regole in modo molto più naturale:

nav {
  background-color: #222;

  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    color: white;
    text-decoration: none;
  }
}

Molto più pulito, vero? 😎

🧠 Come funziona il nesting in CSS

Il CSS nesting è stato ufficialmente introdotto come parte della CSS Nesting Module Level 1 e ormai è supportato dalla maggior parte dei browser moderni (Chrome, Edge, Safari e Firefox dalla versione 117 in poi).

La logica è semplice:
– Le regole annidate devono essere contenute all’interno di un selettore genitore.
– Se serve riferirsi al selettore stesso (il “genitore”), si usa il simbolo &.

Esempio pratico:

button {
  color: white;
  background-color: #007bff;

  &:hover {
    background-color: #0056b3;
  }

  &.active {
    background-color: #003f7f;
  }
}

Qui il simbolo & rappresenta il selettore button.
Quindi &:hover diventa button:hover, e &.active diventa button.active.

⚙️ Regole e limitazioni

Anche se il nesting rende il codice più compatto, ci sono alcune regole da ricordare:

Ogni blocco annidato deve iniziare con un selettore valido.
Non puoi scrivere semplicemente proprietà dopo un’altra regola annidata.

✅ Corretto:

.card {
  color: #333;
  header {
    font-weight: bold;
  }
}

❌ Errato:

.card {
  color: #333;
  header { font-weight: bold; }
  font-size: 16px; /* Non valido: proprietà dopo un blocco annidato */
}

Non abusare del nesting.
Se annidi troppi livelli (più di 3 o 4), il codice diventa difficile da leggere.
Il nesting è utile per strutture logiche, non per riprodurre l’intero DOM.

💡 Buone pratiche

Mantieni il nesting “piatto”: non superare 3 livelli.
Usa & in modo esplicito per hover, focus e varianti di stato.
Evita il nesting inutile se il selettore è già chiaro o riutilizzato altrove.

Esempio di codice “pulito”:

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

  h2 {
    font-size: 1.2rem;
  }

  a {
    color: royalblue;

    &:hover {
      text-decoration: underline;
    }
  }
}

🚀 Compatibilità e strumenti

Il CSS nesting è nativamente supportato in:

Chrome 112+
Safari 16.5+
Edge 112+
Firefox 117+

Se lavori su progetti che devono supportare browser più vecchi, puoi usare PostCSS con il plugin postcss-nesting, che converte il CSS moderno in una versione compatibile.

🧾 Conclusione

Il CSS nesting è una delle aggiunte più eleganti e produttive al linguaggio degli ultimi anni.
Rende i fogli di stile più modulari, leggibili e facili da mantenere, senza dover ricorrere a preprocessor esterni.

Se non lo hai ancora provato, è il momento giusto per iniziare a scrivere CSS più moderno e ordinato!

Riferimenti

MDN - CSS Nesting — https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

Techelopment

Cerca nel blog