Come ottimizzare i fogli di stile (CSS)?

I CSS (Cascading Style Sheets) vengono utilizzati per disegnare il layout della pagina web e che oramai sono diventati un linguaggio di programmazione imprescindibile.

Essendo un linguaggio molto flessibile, ogni web designer può scrivere il codice nel modo che più reputa corretto; ad esempio il codice seguente che assegna il padding (la distanza interna dell’elemento) ad un elemento #selettore_elemento può essere scritto in due diversi modi:

#selettore_elemento{
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left: 20px;
}

è uguale a

#selettore_elemento{
padding:10px 20px 10px 20px;
}

L’unica differenza è che il primo blocco non è ottimizzato perché definiamo il padding per ogni punto cardinale ed ogni accapo occupa spazio rendendo il file più pesante mentre, nel secondo blocco, abbiamo definito l’attributo padding su una singola riga nel formato sopra,destra,sotto,sinistra.

Rendere un foglio di stile molto pesante in Kb è molto semplice se aggiungendo stili, come l’esempio precedente nel 1° blocco, potremmo in poco tempo superare di molto le 500-1000 righe di codice mentre ottimizzando i CSS come nel secondo blocco potremmo portare il file anche a 100-300 righe. Questo renderebbe il sito molto più snello e veloce da caricare.

Queste sono alcune risorse che possono ritornare utili a tutti i webmaster.