50 Consigli Per Ottimizzare i Fogli Di Stile CSS
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.
Ultimi commenti