50 Consigli Per Ottimizzare i Fogli Di Stile CSS

Pubblicato il di

Ecco una ottima guida di Reinhold Weber per uno sviluppo dei fogli di stile (Cascading Style Sheet, o più comunemente CSS) corretto ed ottimale. L’ho trovata girovagando in rete con StumbleUpon, l’ho tradotta e riproposta.

Photo Credit: urbanangel

Cosa evitare

  • In-line CSS (specificare gli stili direttamente nei tag del testo)
  • Dimensioni dei caratteri assolute
  • Utilizzare singoli apici nei path delle immagini
  • Ridichiarare valori già ereditati
  • Applicare margini di cella o bordi ad elementi di dimensioni assolute
  • Posizionare elementi con coordinate assolute
  • Denominare stili e classi in basse alla loro apparenza

Raccomandazioni da seguire

  • Dichiarazione dello stile CSS su una singola riga
  • Commentare il codice
  • Organizzare il file CSS
  • Indentare il sorgente se necessario
  • Semplificare la lettura del codice
  • Utilizzare un sistema comune di nomi per classi e stili
  • Elencare gli stili in ordine alfabetico
  • Il punto e virgola ";" non è necessario per l’ultima dichiarazione
  • Non è necessario dichiarare grandezze (px/em/%) pari a 0
  • Per i colori utilizza il formato esadecimale abbreviato
  • Definisci le pseudo-classi per i link nell’ordine LoVe/HAte (Link, Visited,Hover,Active)
  • Definisci gli elementi dei margini (padding o border) nell’ordine TRouBLed (Top, Right, Bottom, Left).
  • Basa il nome delle classi o degli ID più sulla loro funzione che sull’apparenza
  • Impara a gestire la caratteristica dell’ereditarietà nelle regole CSS
  • Gestisci maiuscole e minuscole con gli stili
  • Sbircia nel sorgente dei fogli di stile sui siti più autorevoli
  • Cerca ispirazione tra i guru del design

Semplifica la tua vita quando sviluppi i fogli di stile

  • Testa i tuoi stili nel browser più recente ed evoluto e poi sugli altri, non viceversa
  • Quando sei in dubbio, valida il sorgente
  • In fase di sviluppo integra le dichiarazioni in pagina, quando on-line importale da un file esterno
  • Installa la toolbar per web developer per Firefox
  • Tieni a portata di mano una libreria di classi CSS pronte

Sapevi che?

  • E’ possibile assegnare classi multiple a singoli elementi
  • Grazie a questo puoi scomporre un singolo stile in classi aventi una singola variabile o costante, ed assegnarle in sequenza agli elementi di pagina
  • Puoi proteggerti dallo spam con CSS
  • E’ possibile utilizzare il php per rendere gli stili CSS dinamici

L’articolo completo è 50+ CSS Best Practices and Coding Guidelines. Ti consiglio anche Web design, CSS e user interface: il meglio del 2005.
Buona lettura.