Ammetto che non pensavo fosse necessario scrivere un articolo su questo argomento, ma a dire la verità ho letto una domanda del genere in un gruppo di web developer.

Il ragazzo chiede:

“Perché non bisogna usare i CSS inline?”

“Bene” dico io “Adesso aprirò i commenti e troverò un paio di risposte secche e spiegheranno le BASI del CSS”.

Invece no, l’unica motivazione è stata (ed è giusta, per carità) che se devi mettere un codice CSS inline in cento pagine diverse, è uno sbattimento incredibile per chi deve inserirlo.

Il ragazzo chiede anche:

“Ma tutto qui? una questione di comodità?”

e viene confermata la test.

Cosa??

Io che, quando sento queste cose, mi shcatta la viulenza!

Io che, quando sento queste cose, mi shcatta la viulenza!

 

Chiariamo intanto cosa significa CSS inline:

Una serie di regole CSS che vengono applicare internamente ad un documento HTML o direttamente sui tag o in un tag <style>.

Esempio – direttamente su un TAG

<div style="float: left;"></div>

Esempio – tramite il tag <style>

<style>
div { float: left; }
</style>

Altri tre motivi per NON scrivere codice CSS inline

Esistono almeno tre altri validi motivi per non scrivere codice CSS inline, vediamoli insieme.

Motivo 1: cache

Quando inserisci il tuo codice CSS in un file esterno questo viene inserito in cache nel browser. Dal secondo accesso in poi, il file non verrà più scaricato in locale, ma rimarrà solo il riferimento al file che adesso risiede localmente, aumentando la velocità di caricamento della pagina stessa.

Motivo 2: performance

Compressione e minificazione sono due operazioni che possono essere effettuate solamente processando il codice CSS in un file esterno.

Quindi, lavorando con un file con estensione CSS, puoi comprimerlo, ovvero togliere tutti gli spazi, a capo e caratteri del genere e renderlo più compatto, e puoi anche minificarlo, renderlo cioè ancora più compatto grazie a particolari regole di scrittura che rendono il codice meno leggibile dall’umano, ma più veloce da eseguire per la macchina.

Test: un codepen con e senza CSS inline

See the Pen CSS inline by Francesco Caruccio (@coderevolution) on CodePen.light

See the Pen CSS external by Francesco Caruccio (@coderevolution) on CodePen.light

 

Nel primo esempio puoi vedere un pen con i CSS inline, nel secondo invece con CSS caricati esternamente.

La differenza è minima, si parla di pochi byte di differenza, però la differenza già qui esiste. Vedrai che la soluzione con i CSS inline sarà SEMPRE più lenta della versione con il file esterno.

Moltiplica per migliaia di righe di codice (e questo CSS nemmeno è compresso ne minificato) e per documento HTML enormi, con l’aggiunta di file JavaScript che “soffrono” lo stesso meccanismo di cache e capirai la differenza.

Motivo 3: leggibilità

Quando lavoriamo con uno o più fogli di stile rendiamo il tutto più leggibile e comprensibile all’occhio umano, il che ti permette di mettere mano al codice anche dopo tempo con minori problemi.

Conclusioni

Quasi mai è indicato usare CSS inline, ma ci sono alcuni rari casi in cui è utile farlo (con coscienza, sapendo BENE cosa stai facendo).

Se vuoi approfondire, ne parlo qui nel precedente articolo: Critical CSS: una tecnica che puoi applicare subito per migliorare le performance del tuo sito