Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

SASS: annidare o non annidare?

L'utilizzo dell'annidamento dei selettori è una pratica comune, e in alcuni casi anche utile. Tuttavia essa presenta vantaggi e svantaggi: ecco quali.
L'utilizzo dell'annidamento dei selettori è una pratica comune, e in alcuni casi anche utile. Tuttavia essa presenta vantaggi e svantaggi: ecco quali.
Link copiato negli appunti

Brad Frost, sviluppatore web di Pittsburgh, ha lanciato su Twitter un'interessante domanda dedicata ai designer CSS ed in particolare agli utilizzatori del motore SASS: nella fase di definizione dei selettori, è preferibile annidarli, oppure no?

Vediamo nello specifico un semplice snippet che mostra entrambi gli approcci.

Il primo, mostra selettori CSS non annidati:

.c-btn {
// regole css
}

.c-btn__icon
{
// regole css
}

Il secondo snippet esegue il medesimo compito utilizzando uno stile di dichiarazione differente, l'annidamento dei selettori:

.c-btn {
   &__icon {
      // regole css
   }
}

Uno sviluppatore CSS moderno deve necessariamente essere in grado di comprendere entrambi gli stili di scrittura, e soprattutto riprodurli in contesti anche più avanzati. Ma vediamo quali vantaggi e svantaggi offrono entrambi gli approcci.

Senza annidamento

Non utilizzare l'annidamento presenta i seguenti vantaggi:

  1. Maggiore grado di reperibilità c-btn__icon CTRL+F
  2. Maggiore leggibilità
  3. Non è dipendente da SASS
  4. Alleggerire SASS media-query

I principali svantaggi di questo approccio sono invece i seguenti:

  1. No DRY D R Y ). La voce dice tutto: con questo approccio è necessario ripetere il selettore, e questa situazione si ripete per tutti i possibili sottoselettori. Oltre ad una quantità di tempo maggiore, allo sviluppatore servirà anche un maggior grado di attenzione agli errori di scrittura.
  2. Prolissità

Con annidamento

Di contro a quanto sopra descritto, l'annidamento ha i seguenti vantaggi:

  1. Yes DRY D R Y viene rappresentato in modo efficace. Se malauguratamente occorre cambiare il nome del selettore, non ci sarà occorrenza di riflettere il cambiamento in ogni sotto-selettore. DRY, appunto.
  2. Risparmio di tempo

Gli svantaggi dell'approccio basato sull'annidamento sono invece i seguenti:

  1. Meno reperibilità
  2. Smarrimento del contesto
  3. Abuso dei propri poteri

Ti consigliamo anche