Ottimizzare i CSS

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:

1. Clean CSS
2. Flumpcake CSS optimizer
3. CSS Tweak
4. CSS Optimizer

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:

1. Studiare, studiare, studiare
2. Usare gli shortands e le proprietà  a valori multipli: soprattutto per font,margini, bordi,
   padding e background
3. Quando possibile, specificare i colori a tre cifre invece di sei (per esempio #FFF al posto di #FFFFFF)
4. Evitare le dichiarazioni ininfluenti (per esempio display:block su elementi float o posizionati assolutamente;
   oppure width:100% o position:static)
5. 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!