10 modi per ottimizzare i fogli di stile

Creare un buon foglio di stile richiede pazienza e precisione, anche una volta che tutto funziona, il test su più browser ha dato esito positivo e abbiamo validato il codice è possibile ottimizzare il css per ridurne il peso e in numero di richieste al server.

1) Sintassi contratta nelle regole

Per ridurre il peso di un foglio di stile la prima cosa a cui bisogna pensare è di ridurne il contenuto. Per fare questo possiamo come prima cosa valutare di utilizzare la sintassi contratta dove è possibile e dove è opportuno.

Ad esempio il seguente codice

margin-top:1px;
margin-right:3px;
margin-bottom:20px;
margin-left:10px;

E’ facilmente sintetizzabile con una sintassi contratta come questa

margin:1px 3px 20px 10px;

La sintassi contratta è applicabile a molte proprietà, è bene conoscerle a fondo per capire quando poterle usare. Ecco un altro esempio per il background.

background-color:#ffffff;
background-image:url(images/immagine.jpg);
background-repeat:no-repeat;
background-position:10px 20px;

che in forma contratta verrebbe così

background:#ffffff url(images/immagine.jpg) no-repeat 10px 20px

2) Evitare le unità di misura per valori negativi

Usare le unità di misura è utile per non confondere i vecchi browser e per non incorrere in problematiche di interpretazione errate se usiamo differenti unità di misura in un singolo css, esiste però un caso dove è possibile omettere l’unità di misura senza problemi, quando il valore è 0.

margin:0;

Essendo 0 ha poca importanza che l’unità di misua siano pixel, percentuali o punti perchè la proprietà sarà sempre nulla.

3) Regole scritte in linea

Un ulteriore modo per ridurre il peso dei css è quello di scrivere le regole inlinea piuttosto che a capo.

body{margin:0;padding:0;text-align:center;}

Questo sistema riduce notevolmente il peso del foglio di stile ma rende più difficoltosa la lettura per l’essere umano, è quindi consigliabile scrivere una regola in linea quando questa non ha più di tre proprietà al suo interno, per regole con più di tre proprietà si scriveranno a cascata.

div{
margin:0;
padding:0;
text-align:left;
color:#000;}

4) Valutare l’eredità di una regola

Abbiamo visto in un precedente articolo quanto sia importante valutare la priorità di una regola css, ma non bisogna esagerare con l’eccessiva specificità. Per esempio questa regola:

div#contenitore div#content div#main p#numerotelefono{}

E’ eccessivamente specifica essendo l’ultimo elemento comunque dotato di un id dovremmo trovare il modo di utilizzare la regola specificando meno elementi:

#numerotelefono{}

5) Evitare l’import

A differenza di <link> che collega un foglio di stile ad una pagina html, l’elemento @import presenta qualche lacuna a livello di performance di caricamento (in particolare per internet explorer) e andrebbe limitato il più possibile. Per approfondire l’argomento leggi questo articolo.

6) Ordinare le proprietà css in ordine alfabetico

Se questo consiglio vi suona come follia, l’unica cosa che può farvi cambiare idea è provare. Questa regola per esempio:

div.{
margin: 0 0 3em 0;
padding: 0.7em 0.2em;
font-size: 1em;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
}

Può diventare molto più leggibile ordinando le regole per iniziale:

div.{
border-bottom: 1px solid #888;
border-top: 1px solid #888;
font-size: 1em;
margin: 0 0 3em 0;
padding: 0.7em 0.2em;
}

Con un sistema del genere in quale punto della regola guardereste per trovare le proprietà del background? Ovviamente in cima. E per trovare z-index? In fondo. E text-align? Poco più su.

Sembra assurdo ma un sistema del genere può far risparmiare molto tempo nel rintracciare le proprietà ed aiuta ad eveitare proprietà duplicate.

7) Non esagerare con i commenti

Aggiungere commenti nel css è sempre utile, soprattutto se lavoriamo su progetti con lunghi tempi di sviluppo o se non siamo i soli a dover modificare i files, aggiungere qualche commento è una forma di cortesia sempre gradita. E’ però utile cercare di limitare i commenti a dove siano realmente necessari, evitando sintassi simili.

/*inizio header*/
#header{}
/*fine header*/
/*inizio contenuto*/
#contenuto{}
/*fine contenuto*/

In questo caso gli id già rendono chiare le funzioni dell’elemento e sarebbe possibile omettere i commenti ma nel caso si desideri mantenere qualche suggerimento nel codice sarebbe opportuno evitare di segnalare la fine e l’inizio della regola.

/*inizio header*/
#header{}
/*inizio contenuto*/
#contenuto{}

8) Dividere le regole su più fogli di stile

Sembra una banalità ma non lo è, avere più files da caricare è sicuramente un carico maggiore in termini di richieste al server ma permette una navigazione più veloce all’utente il quale scaricherà e salverà nella cache i css delle pagine man mano che prosegue nella navigazione. Questo è positivo perchè permette di non scaricare fogli di stile per pagine che non vedremo (quindi non si utilizza banda per dati non necessari) e una volta completata la visita del sito i dati rimarranno nella cache rendendo le future visite più veloci.

9) Utilizzare le regole per internet explorer separatamente

Utilizzare i commenti condizionali è un buon modo per evitare che i comuni browser facciano una chiamata al server in più, la differenza a livello di peso è inesistente se il css è interno alla pagina ma con un css esterno è possibile risparmiare una richiesta al server e il peso del css dedicato ad internet explorer.

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" />
<![endif]-->

10) Utilizzare meglio le classi

Le classi risultano oltremodo utile per ridurre il peso del css, questo perchè una classe definisce una regola applicabile su più elementi a differenza degli id è quindi utile se nella pagina html esistono molti elementi con proprietà comuni. Ovviamente occorre fare attenzione a non esagerare aumentando il numero di classi sugli elementi e di conseguenza il peso della pagina html, un modo utile per valutare se le regole sono ben bilanciate è vedere quante regole sono definite come id e quante come classi, nel caso le prime superino le seconde è utile valutare quante volte vengono ripetuta ogni proprietà nel css.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con . Contrassegna il permalink.

2 risposte a 10 modi per ottimizzare i fogli di stile

  1. Raffaele scrive:

    Ciao ho scoperto il tuo blog di rimbalzo dal tuo sito segnalato su italianwebdesign.it, ottime risorse per chi vole iniziare ad approciarsi al webdesign, avrei però da fare un appunto per il punto 3: forse sarò l’unico ma trovo decisamente più leggibile avere tutto su una riga, avendo l’accortezza di spaziare le proprietà e mettere le varie righe in ordine gerarchico.

    Facendo così si creano automaticamente dei blocchi di selettori compatti, spaziati magari da una riga bianca, ma velocemente riconducibili alla loro funzione, forse perchè sono abituato a css molto grossi (nell’ordine delle 1000/2000 righe, con un selettore per riga) quindi per me è fondamentale non sprecare neanche una riga e rendere tutto il più chiaro possibile ma penso che sia applicabile anche ai piccoli siti, un intero blog starebbe in max 100/150 righe, non ci sarebbe quasi il bisogno di usare le scrollbar.

    • Mauro Accornero scrive:

      Ciao Raffaele, grazie della visita e del commento! Il tuo appunto mi sembra corretto, sicuramente ognuno con l’esperienza si crea la propria metodologia con cui riesce ad ottimizzare e a gestire il lavoro. Ci sono molte discussioni sul web a favore e contro le regole scritte in linea, sinceramente penso che esistendo diverse possibilità sia parte del lavoro di chi scrive i fogli di stile compiere delle scelte in base al contesto, al progetto e alla propria metodologia. Io per abitudine e comodità personale utilizzo le regole in linea solo dove ho meno di tre proprietà per regola ma è questione di come ognuno di noi è abituato a lavorare. Sicuramente una regola se scritta in linea consente di risparmiare qualcosa sul peso del css finale, nel caso non sia possibile per carenza di tempo, considerare l’ottimizzazione del peso del foglio di stile esistono anche dei tool online che eseguono questa operazione in automatico come css optimizer. Con soluzioni del genere si può recuperare qualche byte dai fogli di stile anche senza spendere troppo tempo.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>