Ottimizzare i CSS

In questo articolo, che presuppone una discreta conoscenza dei fogli di stile, parleremo delle best practices (migliori pratiche): vedremo cioè come migliorare la codifica dei fogli di stile in fase di scrittura, così da renderli facilmente leggibili, rieditabili e leggeri in termini di peso.

Lo studio dei css

I css richiedono studio e a parer mio seguire una buona guida è importante. In rete se ne trovano moltissime: tra tante, risorse valide per avvicinarsi e approfondire fogli di stile sono Guida ai Fogli di Stile (CSS) di HTML.it, corredata da molti esempi pratici, e per una lettura veloce e dettagliata i due tutorial (base e avanzato) di Brainjar.com. Infine, per i dubbi teorici e per un miglior livello di dettaglio sui fogli di stile, è spesso utile la reference del w3c.

Le proprietà

Finchè non si conosceranno a memoria tutte le proprietà e i loro possibili valori, può risultare utile una quick reference, cioè un elenco con tutte le proprietà e i loro possibili valori, come quella di W3schools. Inoltre è bene considerare il supporto di ciascuna proprietà, su questa tabella trovate l' elenco delle proprietà e la compatibilità per i più diffusi browsers.

Usare gli shorthands (scorciatoie)

Dopo questa brevissima introduzione sulle risorse inerenti i fogli di stile, entriamo nel vivo dell' articolo. Gli shorthands (scorciatoie) sono proprietà a valori multipli, e il loro uso è decisamente vantaggioso in quanto consentono di snellire molto le regole css e di conseguenza l' intero foglio di stile. Ecco l' elenco degli shorthand, con indicate le proprietà che racchiudono:

• background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
• border
  • border-width
  • border-style
  • border-color
• font
  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
• list-style
  • list-style-type
  • list-style-position
  • list-style-image

C'è da notare che i valori attribuiti agli shorthands vanno elencati secondo un preciso ordine, che andrà seguito anche omettendone alcuni. Vediamo un paio di esempi:

p.inevidenza{ font: italic small-caps 500 1.1em/150% Helvetica,Arial,sans-serif}
div#contenuti{ background: #ffc url(sfondo.gif) repeat-y top right}

Le altre proprietà a valori multipli

Non si tratta di veri e propri shorthands, ma sono decisamente comode. Ecco le principali:

margin
padding
border-witdh
border-style
border-color

Per ciascuna di queste proprietà è possibile specificare da uno a quattro valori:

• Se si specificano quattro valori, questi sono nell' ordine: top-right-bottom-left (alto, destra, basso e sinistra), proprio come la lancetta di un orologio che parte da mezzogiorno.
• Se il valore specificato è uno solo, questo sarà applicato a tutti e quattro i lati;
• se i valori sono due, rispettivamente il primo valore si riferisce ai lati verticali (top e bottom) mentre il secondo a quelli orizzontali (left e right);
• se infine i valori sono tre, il primo si riferisce al lato superiore, il secondo ai lati orizzontali (left e right) mentre il terzo al lato inferiore (bottom).

Anche in questo caso vediamo alcuni esempi:

p { margin: 0 5px 1em}
p.cornice { border-width: 5px; border-style: solid; border-color: #C00 #C00 #900 #900}

Definire i colori

È possibile, invece di utilizzare la notazione a sei cifre per i colori, utilizzarne solo tre, riducendo le tre coppie di simboli uguali a tre singole cifre. Per esempio #000000 può essere abbreviato con #000, e #77CC33 diventa #7C3. E' inoltre possibile, attraverso la notazione a tre cifre e usando solo i simboli 0,3,6,9,C,F ottenere i colori web-safe, cioè quei colori che possono essere visualizzati su monitor a 256 colori (8 bit).

Evitare le proprietà ininfluenti

Spesso, soprattutto all' inizio dello studio dei css, è comune l' abitudine di farcire le regole nei fogli di stile con regole che non sortiscono effetto pratico se non quello di appesantire il foglio di stile. Ecco alcuni esempi di uso di proprietà e valori ininfluenti:

p { width: 500px; height: auto}
span { position: absolute; display: block}

Nel primo caso la regola height: auto non hanno nessun effetto pratico. Fissata la larghezza del paragrafo, il browser si preoccupera di attribuirgli l' altezza necessaria senza bisogno che glielo si dica.
La seconda regola denota una mancanza conoscenza del box model: infatti elementi posizionati assolutamente vengono resi automaticamente block-level, e quindi non ha effetto ridichiararlo nel foglio di stile.
In caso di dubbi sulla reale efficacia di una dichiarazione proprietà-valore un semplice test potrebbe essere effettuato: eliminare la dichiarazione dubbia e vedere se effettivamente cambia qualcosa nella finestra del browser.

Ordinare le proprietà

Sovente ci si trova a rileggere fogli di stile ed avere difficoltà a consultarli per il loro "disordine". L'ordine delle proprietà in una regola css quasi sempre è ininfluente, ma scrivere le proprietà secondo un ordine predeterminato e logico aiuta la codifica e la rilettura del foglio di stile. Personalmente, paragono la scrittura di una regola css alla costruzione di una casa: come appare e com' è posizionata sono le prime due cose. Poi penso a costruirla dall' dall'esterno verso l' interno: prima cosa le dimensioni, poi la distanza dai vicini (margini), i muri esterni e interni (border e padding), poi i dettagli interni: il colore di background e del testo (color), e infine le proprietà sul testo. Ecco quindi una lista di proprietà utile in fase di scrittura:

1. display
2. float e position
3. widht e height
4. Proprietà specifiche dell' elemento
5. margin
6. border
7. padding
8. background
9. color
10. font
11. text-alignment

Nell'elenco la voce proprietà specifiche dell' elemento riguarda soprattutto proprietà applicabili solo ad alcuni elementi, come quelle riguardanti i link (text-decoration), le tabelle (border-collapse) o le liste (list-style).

Per quanto riguarda la gestione delle proprietà è tutto. Scenderemo nei dettagli, analizzando modi e metodi per un'efficace scrittura delle regole.

Continuiamo il viaggio nell' ottimizzazione del nostro css parlando di regole. Ci sono alcune considerazioni che riguardano i selettori nel mio articolo I selettori CSS che vengono utili per scrivere bene i css. Le rivediamo velocemente.

Scrivere regole efficaci

• Usare il raggruppamento parziale solo sotto certe condizioni ossia nel caso in cui le proprietà in comune siano una maggioranza significativa e le proprietà differenti siano al massimo una o due, e vengano specificate nel foglio di stile immediatamente sotto la regola di raggruppamento
• Usare il minor numero di proprietà nei selettori di tipo questo per due ragioni: l' ereditarietà di alcune proprietà e perchè le proprietà specifiche definite nei selettori di tipo andranno ridefinite in selettori più specifici, causando appesantimento del codice css e difficoltà di editing. Quello che si dovrebbe specificare attraverso un selettore di tipo il comportamento di default, espresso attraverso proprietà minime.
• Usare il minor numero di classi possibile Sebbene all' inizio l' uso di classi sia seducente e apparentemente vantaggioso, il mio consiglio è di non abusarne e di usarle con intelligenza e parsimonia. Sovente ci sono tag html che servono allo scopo (per citarne alcuni: strong, em, address, i tag h1.. h6 eccetera). Qualora non ci fosse un tag adeguato a svolgere un ruolo, si può sovente ricorrere all' uso di altri selettori, quali ad esempio il selettore discendente. Se anche in tale caso non fosse possibile trovare un' alternativa logica e ragionata, allora si può ricorrere senza esitazione all' uso delle classi. In tali casi è importante stabilire se la classe sarà di uso generico o specifica per tag
• Usare gli id e i selettori discendenti I selettori di id aiutano ad identificare aree e sezioni di una pagina html. Il selettore discendente spesso aiuta ad implementare regole molto mirate e specifiche che realizzate in altri modi appesantirebbero il codice html.
• Usare nomi significativi per classi e id Sono da evitare nomi di tag html e di proprietà css. Inoltre i nomi di classi e id non dovrebbero tradirne la presentazione, ma piuttosto evidenziarne lo scopo per agevolare la comprensione dell' html e del foglio di stile.

Ordinamento delle regole

Salvo alcuni casi particolari ed eccezioni causate ad un' errata codifica, l' ordine con cui si succedono le regole in un foglio di stile è ininfluente ai fini dell' interpretazione del browser. Stabilire però un ordinamento già in fase di stesura del foglio di stile ne agevola molto la scrittura e la consultazione. Ecco un ordinamento a mio parere ottimale:

1. Stili generici, indicati attraverso i selettori di tipo
2. Classi di uso generico
3. Classi specifiche per tag
4. Stili per le varie sezioni della pagina, seguendo l' ordine del codice html

Ciascuna delle sezioni e sottosezioni del nostro foglio di stile dovrebbe inoltre essere preceduta da un piccolo commento
che ne aiuti l' individuazione. Ecco un esempio:

/* stili generici */
html, body{ /*..*/ }
a{ /*..*/ }
a:hover{ /*..*/ }
h1,h2,h3,h4,h5,h6{ /*..*/ }
p{ /*..* }

/* classi generiche */
.hidden{ /*..* }

/* classi specifiche */
div.news{ /*..*/ }

/* principale */
div#content{ /*..*/ }
div#content h2{ /*..*/ }

/* navigazione */
div#navigation{ /*..*/ }
div#navigation ul{ /*..*/ }

/* footer */
div#footer{ /*..*/ }
div#footer adress{ /*..*/ }

Volendo ridurre i commenti per le sezioni, si può evitare il primo e ridurre al minimo il testo negli altri.

L' uso dei commenti

Nel paragrafo precedente abbiamo accennato ai commenti e al loro uso per suddividere le sezioni del nostro foglio di stile. L' uso dei commenti dovrà comunque essere ridotto al minimo, se si tratta di un foglio di stile ben scritto. Un uso indispensabile dei commenti è quello di evidenziare alcune scelte implementative chiave e regole css che fanno uso di hack.

Indentare le regole

Una pratica comune molto nota ai programmatori è l' indentazione del codice, ossia l' uso dei caratteri di tabulazione per una migliore lettura del codice. Ecco alcune regole ben indentate:

a{
    text-decoration: none;
    border: 1px solid #000;
    padding: 0 2px;
    background-color: #ccc;
    color: #000
    }

a:hover{
    border: 1px solid #ccc;
    background-color: #fcc;
    color: #0f0
    }

blockquote{
    border-left: 5px solid #ccc;
    margin: 0 2em 0.5em;
    padding-left: 0.3em;
    font: italic 1em/1.2em arial,sans-serif
    }

Come si può osservare, dopo la graffa aperta seguono le proprietà una per riga, precedute da alcuni spazi. In realtà non si tratta di spazi, ma di caratteri di tabulazione (ottenibili attraverso il tasto tab). Infatti il carattere di tabulazione uno solo, mentre servirebbero quattro spazi per avere lo stesso effetto. L' uso degli spazi per indentare il codice è quindi sconsigliato in quanto appesantisce di molto il foglio di stile.

Le due regole sopra sono molto leggibili. Con fogli di stile lunghi hanno una significativa controindicazione: producono css molto lunghi (può capitare di ottenere un foglio di stile di 500 e più righe, che non è il massimo da consultare o editare) e pesanti in termini di kilobyte per l' abbondanza di invii e caratteri di tabulazione.

La compattazione delle regole

Abbiamo visto pro e contro dell' indentazione. Per evitare gli svantaggi e soprattutto se si è abbastanza pratici con la scrittura dei css, si può usare la tecnica della compattazione. Come tutte le altre pratiche descritte in questo articolo, il modo migliore è adottarla in fase di scrittura così da evitare di rieditare il file ultimato.

In via teorica, è possibile scrivere un intero css su una riga sola e senza spazi (se non per separare i valori delle proprietà a valori multipli o le scorciatoie). Si otterrebbe un file di peso minimo, ma risulterebbe piuttosto illeggibile e rieditabile. Si può invece procedere a compattare, scrivendo diverse proprietà per riga, tenendo però conto che il numero di caratteri per ciascuna riga non dovrà generare scrolling orizzontale nella finestra dell' editor. Indicativamente si possono scrivere quattro o cinque proprietà per riga per un massimo di 80-100 caratteri circa. Ecco come risultano le tre regole sopra se compattate:

a{ text-decoration: none; border: 1px solid #000; padding: 0 2px;
    background-color: #ccc; color: #000}
a:hover{ border: 1px solid #ccc; background-color: #fcc; color: #0f0}
blockquote{ border-left: 5px solid #ccc; margin: 0 2em 0.5em; padding-left: 0.3em;
     font: italic 1em/1.2em arial,sans-serif}

Da venti righe ne abbiamo solo più cinque, e risultano comunque leggibili. Si noti come sia stato inserito spazio dopo la graffa aperta, dopo ciascun carattere di due punti e dopo il punto e virgola. E per proseguire le dichiarazioni sulla seconda riga si sia inserito un carattere di tabulazione, cosicchè alla sinistra della finestra dell' editor sia possibile riconoscere facilmente i selettori. Da 390 byte del file css indentato, abbiamo solo più 315 byte per il foglio di stile compattato. Una diminuzione di peso del 20% circa. Simili percentuali su un foglio di stile di 10-15 kilobyte significano un secondo in meno per il caricamento da parte di un utente con modem analogico. E, soprattutto, un minor carico del server che ospita il nostro sito.

La compattazione limite

Potremo ancora limare il peso del nostro foglio adottando una compattazione estrema, eliminando ulteriori
spazi. Ecco l' esempio sopra ancora più compattato:

a{text-decoration: none;border: 1px solid #000;padding: 0 2px;
    background-color: #ccc;color: #000}
a:hover{border: 1px solid #ccc;background-color: #fcc;color: #0f0}
blockquote{border-left: 5px solid #ccc;margin: 0 2em 0.5em;padding-left: 0.3em;
     font: italic 1em/1.2em arial,sans-serif}

In questo caso l' unico spazio che abbiamo lasciato è tra la proprietà e il valore. Questo facilita la lettura
del foglio di stile. Infatti possiamo individuare velocemente ogni coppia proprietà: valore grazie ai due
punti e lo spazio successivo: la proprietà sarà alla sua sinistra, e il valore sulla destra. Usando questo tipo di
codifica, abbiamo risparmiato il 25% di peso circa rispetto al codice indentato.

Fogli di stile esterni

Due parole sull' organizzazione pratica dei fogli di stile. Per mantenere una netta separazione in fase di scrittura sarebbero da evitare gli stili in linea. Se vogliamo avere un unico file aperto per comodità di eding si possono utilizzare i fogli di stile incorporati (dichiarati nella sezione head della pagina html). A lavoro finito, è comunque bene portare tutte le regole del foglio di stile esterno, e usare la proprietà @import (o il tag link) per linkare il foglio di stile.Usare un foglio di stile esterno ha due vantaggi principali: consente una centralità del nostro css, così da poterlo linkare su più pagine html, e consente il caching del nostro file css nei browsers degli utenti. Infatti i file css, come le pagine html, vengono messi nei file temporanei del browser. Se le pagine che adottano un foglio di stile sono dieci, o cento, le regole css del nostro sito verranno comunque caricate dai visitatori una volta sola, anzichè essere trasferite assieme ad ogni pagina visitata.

A proposito di centralità: è una buona pratica adottare un singolo foglio di stile per un intero sito. Questo consente una maggiore facilità di editing e modifica, e soprattutto garantisce una consistenza stilistica tra le pagine.

Due buone pratiche da non dimenticare mai parlando di fogli di stile

Ci tenevo a ricordare due buone pratiche che, con il passare del tempo, diventano abitudine comune del webdesigner:

• Validare il foglio di stile - Ecco la pagina del validatore.
• Testare il lavoro sul maggior numero di browsers e garantire una rappresentazione degna sui più diffusi (Internet Explorer 5.x e 6, Opera e Mozilla)

La "checklist" per un foglio di stile ottimizzato

In chiusura, rivediamo brevemente i punti chiave dell' articolo:

• Studiare i fogli di stile
• Se non si conoscono tutte le proprietà e i valori, usare una quick reference
• Usare le scorciatoie e le proprietà a valori multipli
• Quando possibile, scrivere i colori con tre cifre
• Evitare le proprietà ininfluenti
• Ordinare le proprietà all' interno di ogni regola
• Usare il raggruppamento parziale solo sotto certe condizioni
• Usare il minor numero di proprietà nei selettori di tipo
• Usare il minor numero di classi possibile
• Usare gli id e i selettori discendenti
• Usare nomi significativi per classi e id
• Ordinare le regole
• Commentare le varie sezioni del foglio di stile
• Usare il minor numero di commenti possibile
• Commentare dichiarazioni chiave o hack
• Indentare le regole per fogli di stile brevi o a fini didattici
• Compattare i fogli di stile in casi reali
• Usare css esterni a lavoro finito
• Usare un solo css esterno per un intero sito
• Validare il foglio di stile
• Testare il lavoro sul maggior numero di browsers

Per concludere, ecco un esempio
di foglio di stile ottimizzato secondo i criteri espressi nel corso dell'articolo.