Scrivere CSS migliori

Scrivere bene il codice CSS può migliorare la velocità di rendering delle pagine web. Sostanzialmente, meno regole il browser deve interpretare, più velocemente lo fa.
I selettori CSS possono essere raggruppati secondo il loro livello di efficienza nel definire gli elementi della pagina, secondo questo ordine :

1. ID, es. #header
2. Classe, es. .promo
3. Tag, es. div
4. Fratello adiacente, es. h2 + p
5. Figlio, es. li > ul
6. Discendente, es. ul a
7. Universale, es. *
8. Attributo, es. [type="text"]
9. Pseudo-classi/-elementi, es. a:hover.

Vediamo in questo articolo alcune semplici linee guida per avere CSS più performanti, facili da mantenere e da leggere, specie dopo un po' di tempo dalla loro stesura.

Non sovraqualificate

Come regola generale, non specificate più informazioni di quanto sia necessario.

// cattivo
ul#unid {..}
.menu#altroid{..}

// buono
#unid {..}
#altroid {..}

I selettori discendenti sono cattivi

I selettori discendenti rallentano molto e sono fragili, basta un piccolo cambio nell'HTML per scassare tutto.

// molto cattivo
html div table tr td {..}

Evitate la concatenazione di classi

Equivale a sovraqualificare. Sarebbe preferibile creare una nuova classe piuttosto.

// cattivo
.menu.left.icon {..}

// buono
.menu-left-icon {..}

Usate la sintassi compatta

Ogni volta è possibile, usate la sintassi compatta (shorthand). Vedete da voi il risparmio di peso nel file.

// cattivo
.miaclasse {
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
 background: #000;
 background-image: url(../img/bullet.png);
 background-position: bottom;
 background-repeat: repeat-x;
}

// buono
.miaclasse {
 padding: 20px 10px 20px 10px;
 background: #000 url(../img/bullet.png) repeat-x bottom;
}

Evitate di nominare le entità inutili

Semplificare la catena di definizione porta solo vantaggi.

// cattivo
.classeuno table tr.altraclasse td.definizione {..}

// buono
.classeuno .altraclasse td.definizione {..}

Evitate ripetizioni inutili

Raggruppate appena possibile le regole.

// cattivo

.miaclasse {
 color: red;
 background: blue;
 font-size: 15px;
}

.altraclasse {
 color: red;
 background: blue;
 font-size: 15px;
}

// buono

.miaclasse, .altraclasse {
 color: red;
 background: blue;
 font-size: 15px;
}

Condensate le regole

Seguendo il consiglio sopra, potete combinare le regole duplicate, continuando a differenziare le classi se necessario.

// cattivo
.miaclasse {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 16px;
}

.altraclasse {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 8px;
}

// buono
.miaclasse, .altraclasse {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
}

.miaclasse {
 font-size: 16px;
}

.altraclasse {
 font-size: 8px;
}

Evitate convenzioni di nomi poco chiare

È preferibile usare nomi semantici. Una buona classe CSS dovrebbe spiegare di cosa si occupa.

// cattivo
.classeuno {..}

// buono
.bordered-image {..}

Evitate gli !important

Cercate di evitare il più possibile l'uso di !important. È molto meglio usare selettori il più qualificati possibile.

Seguite un ordine di dichiarazione standard

Naturalmente è possibile raggruppare le proprietà CSS in molti modi diversi, questo sarebbe un modo molto ordinato che cerco di seguire (almeno fino a quando non devo fare troppi ritocchi al volo…).

.miaclasse {
 /* Posizionamento */
 /* Display e Box Model */
 /* Background and tipografia */
 /* Transizioni */
 /* Altro */
}

Formattate per bene il codice

Cerco di rispettare durante la composizione una buona impaginazione del codice perché sia più leggibile. Di tanto in tanto, specie quando lavoro su file parecchio rimaneggiati o ridotti ai minimi termini, passo prima il codice al CSS Tidy, è una funzione che hanno tutti gli editor di un certo livello, e vi permette di capire meglio su cosa state lavorando.

Commentate il codice

Cercate sempre di inserire qualche commento al codice se serve, io per esempio mi servo dei commenti per separare le varie sezioni dei mie CSS, perché non amo separare le impostazioni dei miei siti su file diversi, per ridurre le chiamate al web server. Il tutto risulta più leggibile e manutenibile.

Altre informazioni

Vado piuttosto orgoglioso della qualità dei CSS che scrivo, e lo faccio anche cercando di seguire queste regole per mantenere efficienza, leggibilità e chiarezza.

Per saperne di più: Writing Efficient CSS su Mozilla Developer Network e la guida di Google optimize browser rendering.