Minificazione CSS

minifa il css, riducendo il carico del client e del server web

La minificazione serve a produrre un file css più piccolo eliminando i caratteri non essenziali, così il css si carica prima!

La minificazione è un operazione va fatta prima di comprimere il css, perchè eliminando i caratteri inutili riusciamo a comprimere meglio.

 

Vantaggi: file piú piccolo e piú comprimibile.
Santaggi: non leggibile da un umano, dato che può produrre un lungo file su un unica riga!
L’eliminazione dei commenti può complicare il debug. I bug del minificatore, posso rompere il css!

Sintesi: operazione essenziale quando css grosso, tocca abituarsi a questa complicazione data la crescita di utilizzo dei framework.

 

 

Uno strumento efficace è csso, scritto in node.js, lo si puo utilizzare tramite node o come un normale programma Unix.

Per installarlo tramite git:

git clone https://github.com/css/csso.git

 

Per installarlo tramite npm:

npm --install csso

 

 

Per esempio per minificare stile.css, e produrre stile.min.css è sufficente scrivere

cat stile.css ./csso --restructure-off >stile.min.css

 

Consiglio di aggiungere –restructure-off , perché con il css di bootstrap senza questo parametro mi ha generato un css errato una volta.

ad esempio questo sono le prime righe del css attuale
omettendo l’intestazione col copyright per leggibilitá.

head -n 37 stile.css.bak
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}

Proviamo a lanciarlo

head -n 22 stile.css.bak | ./csso --restructure-off
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}