Ultimamente mi è capitato di dover metter mano a fogli di stile realizzati da altri (non propriamente web designer) per apportare correzione e modifiche. Dio ce ne scampi!

Si sa, per la programmazione ci sono regole ben precise per la formattazione di una classe o di un modulo, o anche semplicemente di una pagina php, come ad esempio l’identazione, dove posizionare le parentesi grafe, l’uso delle maiuscole per i nomi di classe e metodi…(e questo è senza dubbio riduttivo).

Ma per i fogli di stile, più comunemente detti CSS?
Forse ci sono delle regole non dette, forse queste regole sono seguite da una ristretta cerchia di adepti, ma girovagando un po’ sui codici sorgenti di alcuni siti web, ho sempre notato che molto spesso la formattazione e la struttura di un foglio di stile è più o meno lasciata al caso, o meglio (o peggio), si nota un pattern abbastanza preciso. Sembra infatti che dopo una iniziale strutturazione dei vari selettori, vi sia un vero e proprio append delle classi che servono al momento.
Ciò può essere dettato da ovvie ragioni di tempo, ma a lungo andare produce a mio parere gravissimi effetti collaterali: ci si trova davanti a CSS lunghi centinaia e centinaia di righe, dove selettori ID si intervallano a selettori di classe, definizioni di layout sono sparse qua e là, in mezzo a semplici definizioni stilistiche di una riga (alzi la mano chi non ha mai visto la classe .red { color: #FF0000 } o simili). Senza contare il rischio più grande, ovvero sovrascrivere definizioni con nuovi comportamenti, a rischio di pericolosi cambiamenti dell’impaginazione. E chi poi verrà a doversi scontrare con quanto prodotto con poca attenzione per l’ordine e la pulizia, si troverà a non capire più dove metter mano.

E’ venuto il momento di fare un po’ di ordine: vi propongo 10 consigli, o meglio 10 buone pratiche per stendere un buon foglio di stile.

1. Definite le proprietà a partire dall’alto iniziando con le proprietà del body e poi a scendere
2. Definite per ogni sezione di impaginazione prima gli elementi box (div) e poi i selettori di elementi inline (class), a titolo di esempio in base anche al punto precedente:
   body{ ... }
#wrapper{ ... }
#header{ .. }
#header .image{ ... }
#header ul li { ... }
#content{ ... }
#content ul li{ ... }
#footer{ .. }
#footer .image{ ... }
#footer .link{ ... }

3. Una volta scelto il modo di scrivere selettori con una o più definizioni, mantenetela, non mischiate modi diversi di formattazione come in questo esempio:
   
#header{
width: 960px;
height: 120px;
}
#content{ widht: 65%; float: left; color: #333333; background-color: #FEFEFE; }
#footer
{
clear: left
}

4. Utilizzate per scopi di impaginazione i selettori id e per tutto ciò che verrà utilizzato esclusivamente una volta sola nella pagina
5. Se ci sono troppi div innestati e nel css vi trovate a dover scrivere cose del tipo:
   #div1 #sub_div1 #sub_sub_div1{ ... }
   riflettete: probabilmente c’è una soluzione migliore
6. Definite dei selettori (di classe) utilità da inserire in fondo alla pagina, come ad esempio:
   /* utilities */
.floatleft{ float: left}
.clearleft{ clear: left }
...
7. Definite in una apposita sezione lo stile per i tag di contenuto generici:
   ...
p{
margin: 0;
padding: 0;
font-size: 1.2em;
}
cite{
font-style: italic;
font-size: 0.9em;
}
a: link, a:visited{
color: #3333FF;
background-color: inherit;
text-decoration: underline;
}
a: hover, a: focus, a:active{
color: #3333FF;
background-color: inherit;
text-decoration: underline;
}
...
8. Raggrupate il più possibile caratteristiche comuni per evitare di duplicare codice, utilizzando l’eredità in cascata tra selettori (con parsimonia)
   Ad esempio questo è un esempio di come a mio avviso non vanno fatte le cose:
   
...
#content ul li{
font-family: Verdana, Arial, sans-serif;
line-height: 1.5em;
font-size: 1.1em;
line-height: 1.5em;
margin: 0.5em 0;
list-style-type: square;
}
#content ol li{
font-family: Verdana, Arial, sans-serif;
line-height: 1.5em;
font-size: 1.1em;
line-height: 1.5em;
margin: 0.5em 0;
}
...

   Scriverei piuttosto così:
   
...
#content ul li, #content ol li{
font-family: Verdana, Arial, sans-serif;
line-height: 1.5em;
font-size: 1.1em; line-height: 1.5em;
margin: 0.5em 0;
}
#content ul li{
list-style-type: square;
}
...

9. Utilizzate una riga di commento per separare le varie sezioni di un css, non costano nulla al momento, ma possono tornare davvero molto utili quando dopo diverso tempo bisogna rimetterci mano.
10. Se dovete modificare pesantemente un foglio di stile creato precedentemente da altri, e lo trovate assolutamente complicato, l’ultimo consiglio, ma non per questo meno importante è il solito: “CTRL+A” e “Canc”. Ripartire da capo a volte è la soluzione migliore ;D

Questi sono semplici consigli, che ho imparato a mettere in pratica solo con tanti, ma tanti, fogli di stile sotto mano. Provate e sperimentate: solo sbagliando si impara, e magari la prossima volta mi scrivete voi altre best practice!