Nettoyer le code css non-utilisé

Hier je me suis replongé dans le code pour mon blog, le port de Jekyll vers Hugo s’était plutôt bien passé mais, port oblige, la feuille css contenait pas mal d’éléments non-utilisés. J’aurais pu laisser cela dans l’état car ça n’affecte que peu l’utilisation du blog et la vitesse de chargement (34ko le fichier css).

En revanche par souci de lisibilité et de méconnaissance certaine du css je me suis dis qu’il serait judicieux de faire le ménage pour avoir une feuille propre pouvant être travaillée par la suite.
Voici donc un court billet sur le sujet.

J’ai vu que des outils écrits en JavaScript (utilisable via NodeJS) existaient, mais je n’ai pas envie de me mettre dedans maintenant. Non, ce qu’il me faut c’est quelque-chose de plus direct et rapide à utiliser, dans un navigateur web.

Et là, j’ai trouvé deux outils pour les navigateurs Chrome et Firefox qui permettent d’identifier les élements non-utilisées dans les différentes feuilles utilisées :

Voilà maintenant une feuille de style qui ne pèse plus que 15ko, je passe d’un fichier avec plus de 10 000 lignes à seulement 750. Maintenant il va falloir reprendre cela pour le clarifier encore plus.

Je ne sais pas trop si l’extension pour Firefox analyse simplement la page ou le site entier alors je l’ai utilisé sur quelques pages comprenant des éléments différents puis utiliser diff pour voir les différences. Aucune trouvée sur trois pages. On verra bien si je remarque des manquements prochainement sur le site.

Billets en liens :