Fogli di stile efficaci ed efficienti
La separazione della struttura della pagina dalle sue regole di visualizzazione è sicuramente un vantaggio sia in temini di scalabiltà che di progettazione, ma da quando ho incominciato a utilizare in modo massiccio marcatori come DIV e Liste di definizione, realizzando di fatto siti con un uso molto limitato di tabelle (tableless), la dimensione dei fogli di stile è aumentata notevolemente, generando spesso un po’ confusione dovuta ad una cattiva organizzazione delllo stesso.
Ho quindi cercato di standardizzare, trovando alcune regole che potessero aitarmi.
- Nomi significativi alle classi, e agli ID
- Aggiunta di un appropriata quantita di commenti
- Organizzazione del foglio di stile in sezioni (es. common , wrapper , header , main , footer)
- Utilizzare per alcune proprietà come margin, padding , border, font e background le forme contratte
- Verificare la validazione del foglio di stile ( gli errori di distrazione sono i più comuni )
Mi sforzo poi di prestare attenzione durante la creazione di nuovi stili in modo da evitare inutili rindondanze, creando piuttosto classi generiche da applicare in aggiunta alla pricipale.
Faccio un esempio …
* { font-family: Verdana, Arial, Sans-Serif; }
.testo_12 { font-size: 12px; }
.testo_rosso { color: #f00; }
.testo_12 { font-size: 12px; }
.testo_rosso { color: #f00; }
che verranno applicati alla proprietà class infilando entrambe le classi separate da un spazio
< p class="testo_12 testo_rosso" >testo< / p >
anche se non indicato nelle classi il font utilizzato sarà un verdana, in quanto la sia definizione è stata applicata a tutti gli elementi della pagina tramite il segno “*”.
Quanto scritto non è solo frutto della mia esperienza ma è il risultato di lettura delle molte fonti disponibili sulla rete di cui qui sotto potete vederne un piccolo e parziale elenco.
Links di riferimento:
[tags]css , fogli di stile[/tags]
