in sviluppo

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; }

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]

Write a Comment

Comment