Ottimizzare i CSS

Link copiato negli appunti

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:

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
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:

display
float e position
widht e height
Proprietà specifiche dell' elemento
margin
border
padding
background
color
font
text-alignment

Nell'elenco la voce proprietà specifiche dell' elemento

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

Scrivere regole efficaci

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

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:

Stili generici, indicati attraverso i selettori di tipo
Classi di uso generico
Classi specifiche per tag
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 */

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: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

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:

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:

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

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 pagina del validatore
Testare il lavoro sul maggior numero di browsers

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.

Indice lezioni