SASS: annidare o non annidare?

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