Fogli di stile efficaci ed efficienti

Data: 19 Agosto 2006
Autore: Maurizio Pelizzone
web  css

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:

Technorati: ,
BlogBabel: ,

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • co.mments
  • De.lirio.us
  • Fark
  • Furl
  • NewsVine
  • Reddit
  • Smarking
  • Spurl
  • Segnalo
  • OKNOtizie
  • Taggly

Questo articolo è stato pubblicato il 19 Agosto 2006 alle 12:44 pm ed è stato letto 10827 volte
Archiviato sotto sviluppo, web, css.

Se questo post ti è piaciuto puoi iscriverti al mio Feed Rss e ricevere direttamente gli aggiornamenti di questo blog sul tuo FeedReader oppure puoi decidere di offrirmi un caffè.
Se ti va puoi lasciare un commento e leggere quelli degli altri, ma se preferisci puoi passare direttamente al post precedente o a quello successivo.


Forse collegati ..

  • the CSS playground
    scopro grazie al blog di Full(o)bloG questo fantastico sito. Che cosa troverete ? "esperimenti" con i fogli di stile Alcuni
  • Fogli di stile comodi ...
    Alcuni tag html ( body e form tanto per dirne due) hanno impostato di default un margine che in alcuni
  • magie con i fogli di stile
    su altri blog ho visto usare i css per creare degli effetti molto carini in alcuni tipi di tag
  • Centrare gli elementi DIV con i CSS
    Durante la sperimentazione di layout tableless, ho trovato molto interessante questo trucchetto per centrare orizzonzalmente un elemento DIV. Sfruttando i fogli
  • Trasparenza con Stile
    Bello il titolo ... vero? Trasparenza come effetto di trasparenza , Stile come fogli di stile ( aka CSS ) Quello che

Lascia un messaggio