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:
- Maggiore grado di reperibilità
c-btn__icon
CTRL+F - Maggiore leggibilità
- Non è dipendente da SASS
Alleggerire SASS
media-query
I principali svantaggi di questo approccio sono invece i seguenti:
- 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.
- Prolissità
Con annidamento
Di contro a quanto sopra descritto, l'annidamento ha i seguenti vantaggi:
- 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.
- Risparmio di tempo
Gli svantaggi dell'approccio basato sull'annidamento sono invece i seguenti:
- Meno reperibilità
- Smarrimento del contesto
- Abuso dei propri poteri