Minification CSS

Qu’est-ce que la minification CSS ?

La minification consiste à retirer les caractères inutiles d'un fichier  en vue de réduire sa taille, il compacte donc les instructions. Les caractères inutiles à l'interprétation d'un style CSS sont principalement les commentaires, les espaces et la tabulations

Il est important de ne pas confondre la minification avec la compression, car la compression va se servir d’algorithmes pour réduire la taille du fichier. Le navigateur du destinataire du fichier devra donc effectuer une opération de décompression pour interpréter le fichier, ce que permet d’éviter la minimisation.

Pourquoi minifier un fichier CSS est important ?

Retirer les caractères inutiles permet d’améliorer le délai de chargement du fait que le fichier CSS pèse moins lourd. 

Comment effectuer une minification CSS ?

Pour effectuer ce traitement, il est intéressant d'utiliser un utilitaire (et ne pas le faire manuellement) comme cssminifier.com qui permet de minimiser un style CSS en ligne.

Exemple d'un style avant minification :

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

Après minification :

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

Il est également possible d'inclure les styles externes dans leur version minimisée. De nombreux fournisseurs (CDN) le propose pour la version de production.

Des optimisations manuelles peuvent également être effectuées dans les déclarations comme, par exemple, réduire la déclaration des couleurs en hexadéciaml #000000, qui peut être raccourcie par #000. Cela est également possible si deux éléments ont le même style, on peut alors les combiner au sein d'un même bloc :

  h1 {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

  .title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

Optimisation :

  h1, title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #ccc;
  }