Ottimizzare i CSS
Venerdì 19 Maggio 2006 - 09:00
di Alessandro Fulciniti
L’ottimizzazione dei CSS è uno di quegli argomenti evergreen e allo stesso tempo poco trattati. Ma vale la pena usare un servizio automatico? La mia risposta breve è “dipende, ma in generale no”. Ma presentiamo prima i protagonisti di questo post, ovvero i siti/servizi che ci danno l’opportunità di snellire i nostri CSS:
L’ordine in cui li ho riportati non è casuale: per ciascuno di questi optimizer ho infatti fatto il test con il CSS di <edit>: e riportano una compressione che va dal 12% circa al -1.29% (ovvero un’aumento delle dimensioni). Interessanti soprattutto le caratteristiche dei primi due: Clean CSS riporta infatti ciascuna modifica attuata, mentre Flumpcake CSS optimizer
offre la possibilità di avere un CSS ideale per la leggibilità attraverso l’opzione “Pretty Print”.
Siamo ora pronti ad affrontare la domanda cruciale del post. A parer mio l’ottimizzazione migliore
è quella manuale che va fatta in fase di codifica stessa. Usare un tool aumatico comporta diversi svantaggi e rischi. Il risultato è poco leggibile e mantenibile, modificato nella sostanza o addirittura compromesso per la resa visuale nei diversi browser. Per questo è importante testare la resa delle pagine anche dopo l’ottimizzazione automatica.
Ovviamente, a fronte di diversi svantaggi, c’è comunque un lato positivo: un CSS più leggero. Una cosa da tener presente è che percentuali di
riduzione alte fornite da un tool di ottimizzazione sono indice di poca pratica e scarsa conoscenza dei CSS. E, ultimo ma non meno importante: i tool di ottimizzazione non sono intelligenti, e non sono in grado di risolvere ridondanze o eliminare dichiarazioni ininfluenti.
Ho presentato un po’ di tempo fa alcuni consigli di ottimizzazione nell’articolo Ottimizzare i CSS, consigli che ritengo tuttora validissimi. Se dovessi sintetizzarne solo cinque:
- Studiare, studiare, studiare
- Usare gli shortands e le proprietà a valori multipli: soprattutto per font,margini, bordi,
padding e background - Quando possibile, specificare i colori a tre cifre invece di sei (per esempio #FFF al posto di #FFFFFF)
- Evitare le dichiarazioni ininfluenti (per esempio display:block su elementi float o posizionati assolutamente;
oppure width:100% o position:static) - Adottare il proprio stile di ottimizzazione proprio in fase di scrittura, comunque massimo tre o
quattro dichiarazioni (ovvero coppie proprietà-valore) per riga
Questo è tutto per ora: buona ottimizzazione!
Commenti
1
Credo che i tool automatici possano tornare utili per imparare qualcosa di più sui css e capire come risparmiare byte.. ma ho i miei dubbi sul loro utilizzo, forse Clean CSS è il migliore.
In genere si rischia di vedere compromessa la leggibilità del css stesso, che comporterebbe problemi per fare modifiche successive.
2
Boh, io CleanCSS lo uso per rimettere in ordine il mio foglio di stile e renderlo più leggibile.
A volte scrivo tutto su una riga e lui me le spezza e mi mette le giuste indentazioni, cosa posso chiedere di più?Ci sono: un tool uguale per PHP :D
3
Personalmente, ritengo questi tools completamente inutili per una ragione molto semplice.
Le macchine servono per evitare agli umani i lavori ripetitivi e noiosi che, loro (le macchine), sanno fare molto meglio ed efficentemente di noi. Fin qui tutto bene.
Però, creare un css NON è né un lavoro ripetitivo, né un lavoro noiso, ma creativo, quindi un essere umano non può e non deve, a mio avviso, essere soppiantato da una macchina per questo tipo di compiti.
Nessuna macchina saprebbe scrivere un css o uno script meglio di una/un professionista, e meno male, dico io, se le macchine potessero sostituirci anche in questo sarebbe la fine ;-)
L’unica soluzione per scrivere css e scripts chiari ed efficienti è quella di abituarsi, sin dall’inizio, a scrivere in maniera chiara ed ordinata, piena di commenti utili ed indicativi.
In questo caso, anche se il css o lo script fossero di grandi dimensioni, il solo fatto di essere stati concepiti da una/un professionista con esperienza sarebbero non solo garanzie di velocità ed efficienza, ma anche di chiarezza del testo e, quindi, di facilità di manutenzione e di attualizzazione nel tempo.
È chiaro che l’approccio al lavoro di sviluppatore, dal mio punto di vista, è di tipo artigianale, anche se se ne possono vedere possibili applicazioni in aziende di tipo piú grande. Ad ogni modo bisogna amare quello che si fa, sennò non fa senso quello che sto dicendo.
Questo è quello che posso dire sull’argomento, per quello che ne so.
# - postato da Paolo Dodet - 22 Maggio 2006 - 17:53