Durante la fase di ottimizzazione delle pagine è logico includere nel discorso anche l’ottimizzazione dei fogli di stile.
Designer che vai, codice che trovi
Il fatto che sul mercato esistano numerosi tool di design, comporta inevitabilmente che ognuno ragioni a modo suo; questo senza contare che il designer ha poi i suoi usi e costumi, e che quindi è abituato a mettere uno spazio tra l’apertura della graffa e il nome, o un salto riga tra un blocco e un altro. Non sto a sindacare se sia corretto o meno.
Un giusto compromesso tra leggibilità e compressione
Il foglio di stile, oltre che funzionale, a mio avviso deve avere quel giusto compromesso tra leggibilità e compressione. Un foglio di stile non leggibile, perchè condensato al massimo (niente spazi, niente salti riga) può essere utile per risparmiare banda, visto che togliendo caratteri inutili si riducono anche le dimensioni del file. Ma cosa succede se bisogna poi fare una modifica a questo colore o a quel margine?
Inevitabilmente bisognerebbe perdere del tempo prezioso a cercare l’istruzione corretta. Uno scenario di compressione potrebbe essere ideale per siti ormai congelati, dove le modifiche non sono più necessarie.
Ma a che pro? Certo, se stiamo parlando di decine di KB, la differenza nel lungo periodo si farebbe sentire, ma nell’ordine di 1 o 2 KB, secondo me è più importante mantenere la leggibilità del documento piuttosto che il resto.
Lavorare con i fogli di stile
A questo proposito, oggi voglio segnalare quelli che sono gli strumenti necessari per lavorare con un foglio di stile:
Un buon editor. Sotto windows sono solito utilizzare TopStyle, mentre sul Mac (che ormai è diventato il mio sistema per eccellenza) utilizzo CSSEdit;
Dei validatori. Ovviamente un foglio di stile che non rispetta gli standard serve a ben poco. Quindi in primo luogo il validatore del W3C, che attraverso le sue API è utilizzato anche dal CSSEdit e da TopStyle per fornire un resoconto all’interno dell’applicazione senza per questo collegarsi al sito web remoto.
Degli ottimizzatori. Qua la storia potrebbe farsi estremamente lunga. Esistono decine di siti web che offrono servizi on line per l’ottimizzazione e la compressione dei CSS, ma approfondisco di seguito.
In funzione di quanto detto sopra, ovvero preferisco una discreta leggibilità del foglio di stile e una modesta compressione, tutti gli ottimizzatori provati sono per la stragrande maggioranza inutili. Ci sono da quelli che trimmano tutti gli spazi, facendo un bell’ammasso di istruzioni sequenziali, a quelli che danno una limatina alla formattazione.
A mio avviso, se si è dei bravi designer, il più delle volte, questi servizi sono completamente inutili. L’unico, invece, veramente degno di nota è il: CSS Checker, perchè ha una caratteristica che nessun’altro analizzatore fino ad oggi provato offre. L’analisi delle pagine web e contestualmente del foglio di stile per verificare quali elementi (classi o dichiarazioni) sono stati utilizzati e quali possono essere anche accomunati tra di loro perchè simili.
Questo aspetto è allora decisamente interessante se vogliamo rileggere l’ottimizzazione del CSS in chiave di KB sprecati.