Avec uncss, mettez au régime vos feuilles de styles

Uncss est un outil sous Node.js qui permet d’analyser les feuilles de style par rapport à l’utilisation que vous en faites dans votre site et retirer toutes les règles inutiles afin de réduire son poids drastiquement et donc accélérer son chargement !
Voyons comment il fonctionne, si il est vraiment efficace et comment l’utiliser.

Comme ça marche ?

Développé par Giacomo Martino depuis avril 2013, son fonctionnement est assez simple. Lorsqu’on le lance, l’outil démarre un Phantomjs pour scanner la page HTML visée, récupère toutes les règles CSS existantes, vérifie pour chacune d’elle qu’il existe un noeud DOM dans la page correspondant, et si ce n’est pas le cas, il supprime cette règle inutile.

En lisant cette explication, vous vous dites surement déjà que cela ne fonctionne pas avec des styles ou des noeuds html ajoutés dynamiquement, et vous avez en partie raison. Si le style ou le noeud n’est pas dans la page à son démarrage (en html ou ajouté au onload en JavaScript) uncss le considèrera comme inutile et le supprimera. Heureusement, il existe plusieurs moyens de lui indiquer les exceptions. Nous reviendrons dessus dans la troisième partie de cet article.

Est-il vraiment efficace ?

Prenons l’exemple du site JS-Republic, il embarque en framework CSS Normalize, Skeleton et Animate.css. Concaténé et minifié avec le code propre au site, la feuille de style résultante pèse 104 Ko sans uncss. Avec uncss la feuille s’allège et passe à 27 Ko !
Soit un gain de poids de plus de 60%

Comment l’utiliser ?

Il existe des intégrations avec Gulp et Grunt, mais dans cet article je me concentre sur un exemple Gulp.
Voici un exemple simple d’utilisation dans un fichier gulpfile.js (bien sûr, il ne faut pas oublier de l’installer via npm install gulp-uncss –save-dev avant d’essayer de l’utiliser)

const uncss = require('gulp-uncss');
gulp.task('css', () =>
    gulp.src('public/css/**/*.css')
        .pipe(uncss({
            html: ['public/index.html'],
            ignore: [/^#konami-overlay/]
        }))
        .pipe(gulp.dest('build/public/css'));
);

Vous aurez noté la propriété html qui permet à uncss de spécifier le ou les fichiers html (ou l’url) à scanner ainsi que la propriété ignore qui permet de définir les sélecteurs css à ignorer pendant le filtrage.
Ces sélecteurs peuvent être donnés sous format texte ou, plus intéressant, sous la forme d’une expression régulière. Cela présente l’avantage de pouvoir matcher un groupe de règles en une ligne. Dans notre exemple, on exclut toutes les règles css avec un sélecteur commençant par “#konami-overlay”.
Pour en savoir plus sur l’outil et son utilisation, je vous invite à consulter la documentation uncss.
Mathieu Breton CTO chez JS-Republic
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC est une société de services spécialisée dans le développement JavaScript. Nous sommes centre de formation agréé. Retrouvez toutes nos formations techniques sur notre site partenaire dédié au Training” btn_label=”Nos formations” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]