Sull’efficienza dei selettori annidati

Qual è il migliore approccio nella definizione dei selettori all’interno di un foglio di stile? Di quali fattori tenere conto? Va bene privilegiare la leggibilità  e l’usabilità  del codice sacrificando, almeno entro limiti accettabili, le performance nel rendering della pagina?

Possono essere così sintetizzati gli spunti di discussione che può suscitare un post come questo di Cory Schires. Il nostro si esprime a favore della pratica dell’annidamento profondo dei selettori CSS.

Ammettiamo di avere un elemento span con classe position che ha come elementi antenati un paragrafo, un div con classe employee e un altro div con id our_team (sto replicando per comodità  i nomi usati da Schires nel suo esempio). Vogliamo applicare al testo di <span class="position"> una dimensione di 10px e un colore #add036.

Bene, le opzioni che lui propone come alternative nella scrittura deo codice CSS sono questa:

.position { color: #add036; font-size: 10px; }

e questa:

#our_team .employee p span.position { color: #add036; font-size: 10px; }

In questo secondo caso abbiamo un esempio di selettore annidato in profondità , ovvero preceduto nella definizione della regola dai suoi elementi antenati.

Schires offre una lista di benefici derivanti da questo approccio, ma tutto si può così sintetizzare:

Your code will be better organized, easier to read, and more maintainable.

Nel rimandarvi al post per gli esempi completi e per approfondire il pensiero dell’autore, vi chiedo: tutti convinti? àˆ un approccio che usate?