Trouver le CSS inutilisé
Un outil pour repérer les règles mortes

Ce que fait un outil de CSS inutilisé

Les feuilles de style grossissent toujours. Vous ajoutez des fonctions et changez le design, et le vieux code reste. Par conséquent, chaque visiteur télécharge des styles pour des parties du site qui ne s’affichent plus.

Un outil de CSS inutilisé répond à une question. Quelles règles peuvent partir sans changer l’aspect d’aucune page ? Donc celui-ci lit votre HTML, votre CSS et votre JavaScript. Ensuite, il range chaque règle dans l’un de quatre groupes.

Les groupes sont faciles à lire. D’abord, les règles que rien n’utilise. Ensuite, les règles dont seuls certains sélecteurs correspondent. Puis, les règles gardées car un script pourrait en avoir besoin. Enfin, les règles que vos pages utilisent maintenant.

Le résultat est un plan, pas un pari. Chaque règle a sa raison, donc vous pouvez la vérifier avant de supprimer quoi que ce soit. Ensuite, vous téléchargez la feuille propre en une seule étape.

Comment cet outil lit votre code pour trouver le CSS inutilisé

Le travail se fait en trois passes. D’abord, la page transforme votre HTML en arbre d’éléments, chacun avec sa classe, son id et ses attributs. Ensuite, elle lit votre CSS et sépare chaque liste de sélecteurs en sélecteurs simples. Enfin, elle teste chaque sélecteur sur chaque élément.

Votre navigateur fait tout cela. Comme ce site bloque les façons dangereuses de lire le balisage, l’outil utilise son propre lecteur. Donc il n’exécute jamais le code collé, et un script collé ne fait rien.

La comparaison suit les vraies règles de CSS. Par exemple, une espace veut dire descendant, et un signe supérieur veut dire enfant. De plus, :nth-child compte les frères comme un navigateur. Ainsi, quand un sélecteur rate votre balisage, le rapport le dit.

Trouver le CSS inutilisé sur plusieurs pages

Une page montre rarement tout. Par exemple, une règle du paiement semble morte sur l’accueil, pourtant le paiement en a besoin. C’est pourquoi cet outil prend toutes les pages que vous lui donnez.

Vous pouvez coller plusieurs pages dans une seule zone. Il suffit de commencer chaque nouvelle page par une ligne de commentaire qui dit page. Ou importez vos fichiers HTML, et chaque fichier compte comme une page.

Chaque règle utilisée dit aussi où elle vit. Par exemple, utilisée sur 2 pages sur 5 vous dit qu’un style appartient à un modèle. Ainsi, cet indice aide quand vous divisez plus tard une grande feuille en plus petites.

Pourquoi une seule page ne suffit pas

La plupart des sites partagent une feuille entre de nombreux modèles. Donc si vous testez une seule page, environ la moitié du fichier semble inutilisée, ce qui est faux. Mais ajoutez une fiche produit, un article de blog et un formulaire de contact, et le vrai poids mort apparaît.

La règle est simple. Ajoutez une page de chaque type de votre site, car l’outil ne peut juger que les pages qu’il voit.

Les classes que votre JavaScript ajoute plus tard

Les menus s’ouvrent, les onglets changent et des fenêtres apparaissent. Chaque fois, un script ajoute une classe, donc la classe n’est pas dans le HTML au départ. Par conséquent, un outil négligent dit ces règles inutilisées, et les supprimer casse le menu.

Cet outil lit aussi vos scripts. Il collecte chaque chaîne qu’ils contiennent, même les morceaux des gabarits de texte. Donc si un script cite is-open, la règle .menu.is-open reste, avec une étiquette au lieu d’une suppression.

Les préfixes comptent aussi. Par exemple, un script qui construit btn--${state} peut créer toute classe qui commence par btn--. Ainsi, chaque règle pour ces classes reste, et l’étiquette explique pourquoi.

Les liaisons des frameworks reçoivent le même soin. L’outil lit les attributs de classe de Vue, Alpine et Angular, plus les attributs data et les événements en ligne. En bref, il couvre les sources habituelles de classes cachées.

La liste protégée pour tout le reste

Certaines classes viennent d’endroits qu’aucun outil ne lit. Par exemple, une extension peut les ajouter sur le serveur, ou un rédacteur peut les taper à la main. Pour celles-là, utilisez la liste protégée.

Chaque ligne accepte un nom de classe, un nom avec une étoile ou un motif entre barres obliques. Ainsi, wp-* garde toutes les classes WordPress. De plus, un motif comme /^is-/ garde toutes les classes d’état d’un coup.

Pseudo-classes, pseudo-éléments et états

Beaucoup d’outils de CSS inutilisé se trompent justement ici. Ils cherchent .card::after ou .menu summary::before, ne trouvent pas cet élément et déclarent la règle morte. Or un pseudo-element met en forme une partie de son élément. Donc la règle compte comme utilisée dès que l’élément existe.

Les états marchent pareil. Quand une page se charge, personne n’a encore survolé, ciblé ni coché quoi que ce soit. Cependant, les visiteurs survolent et cliquent vite. Donc :hover, :focus et :checked comptent ici comme atteignables.

La structure compte quand même. Par exemple, li:nth-child(4) dans une liste de trois éléments ne correspond jamais, car aucun clic n’ajoute un quatrième élément. En bref, l’outil garde seulement ce qui pourrait vraiment correspondre.

Supprimer le CSS inutilisé en gardant votre mise en forme

Trouver les règles mortes n’est que la moitié du travail. L’autre moitié, c’est un fichier propre à publier. Donc cet outil coupe les règles mortes dans votre propre texte. Il ne reconstruit pas votre feuille de style.

Vos commentaires, vos espaces et votre ordre restent. Quand seule une partie d’une liste de sélecteurs est morte, seule cette partie part. De plus, l’outil retire les media queries vides.

Vous choisissez la forme du résultat. Gardez-le lisible pour votre projet, ou cochez minifier pour une copie plus petite. Ensuite, copiez-le, ou téléchargez-le à côté du rapport CSV.

@keyframes, polices et variables mortes

Les règles ne sont pas le seul poids mort. Une animation inutilisée, une police inutilisée et une propriété personnalisée que personne ne lit coûtent aussi des octets. Donc l’outil liste chacune sous son propre titre.

Cette vérification se fait une fois les règles mortes parties. Par conséquent, l’outil marque aussi une police comme inutilisée si seule une règle supprimée l’utilisait. Une simple recherche de texte le raterait.

Il repère aussi l’erreur inverse. Si une règle lit une propriété personnalisée que rien ne définit, l’outil la liste. En général, cela signale une faute de frappe ou un fichier manquant.

Récupérer une vraie page par son adresse

Parfois, vous n’avez que l’adresse web. Dans ce cas, tapez-la, et ce site récupère la page, ses feuilles de style et ses propres scripts. Ensuite, la vérification se fait dans votre navigateur comme d’habitude.

La récupération est prudente. Elle suit un niveau de @import, ignore les scripts d’autres sites et s’arrête à une taille sûre. Ainsi, un gestionnaire de balises ou un chat ne vous fait pas perdre de temps.

Ce mode convient pour un coup d’œil rapide sur un site qui n’est pas le vôtre. Cependant, pour votre propre projet, collez ou importez les fichiers source. Ainsi, vous ajoutez tous les modèles d’un coup.

Ce que l’outil ne peut pas savoir

Aucune vérification statique ne voit tout. Par exemple, une classe issue d’une valeur du serveur, ou un balisage chargé plus tard par un script, reste caché. C’est pourquoi chaque suppression a une raison que vous pouvez lire avant.

Donc traitez le résultat comme une revue de code. Vérifiez la liste, protégez ce dont vous avez besoin et testez le fichier propre sur une copie de préproduction. Pour un deuxième avis, le Coverage panel in Chrome DevTools montre ce qu’une visite a utilisé.