Couverture CSS et styles inutilisés

Les grands fichiers CSS contiennent souvent des styles pour des composants absents de la page actuelle. Chaque octet inutilisé augmente le temps d’analyse, le temps de construction du CSSOM et la taille transférée. Une application de production typique peut contenir au moins 90 % de CSS inutilisé sur une page donnée.

Ouvrez DevTools → panneau Couverture (Cmd+Shift+P → Couverture). Lancez l’enregistrement, interagissez avec la page, puis arrêtez-le. Le panneau affiche chaque fichier CSS avec son pourcentage d’utilisation et met en évidence les règles inutilisées en rouge. Exportez les données de couverture au format JSON pour les analyser.

PurgeCSS analyse vos fichiers HTML, JS et de modèles à la recherche de noms de classes, puis supprime les règles CSS inutilisées. Configurez des motifs de contenu correspondant à tous les fichiers susceptibles de référencer des noms de classes. Ajoutez à la liste blanche les classes utilisées dynamiquement (ajoutées par JS) afin d’éviter leur suppression accidentelle.

Le compilateur JIT de Tailwind génère uniquement les classes utilitaires réellement utilisées dans vos modèles. Le CSS obtenu est minuscule — souvent de 5 à 15 Ko pour une application complète — car les utilitaires inutilisés ne sont jamais générés. C’est le résultat idéal de l’élimination.

Dans une configuration webpack ou Vite, ajoutez PurgeCSS avec des motifs de contenu couvrant tous les fichiers de modèles. L’option de liste blanche accepte des chaînes, des expressions régulières et une liste blanche profonde pour les schémas de classes dynamiques complexes provenant de bibliothèques telles que Headless UI.

Les modules CSS génèrent des noms de classes uniques par fichier et éliminent les modules inutilisés par élagage de l’arbre avec la configuration du regroupeur. Seuls les modules CSS importés sont inclus dans l’ensemble compilé — le regroupement naturel avec les composants élimine les styles globaux inutilisés.

Fractionnez le CSS par itinéraire dans des environnements tels que Next.js (extraction du CSS par page), ou utilisez des importations dynamiques avec des modules CSS. Chaque page ne charge que ses propres styles, ce qui rend pertinente l’analyse de couverture par page plutôt que par application.

L’audit « Réduire le CSS inutilisé » de Lighthouse estime les économies potentielles d’octets obtenues en supprimant les règles inutilisées. Il identifie les ressources de feuilles de style présentant les pourcentages d’inutilisation les plus élevés. Utilisez-le comme guide de priorisation pour déterminer quels fichiers auditer en premier.

L’analyse de couverture ne capture que les états visibles pendant l’enregistrement. Les états de survol, les états d’ouverture des fenêtres modales, les états d’erreur et les états authentifiés doivent être déclenchés manuellement pendant l’enregistrement de la couverture afin d’éviter la suppression incorrecte de leurs styles.

Les feuilles de style globales monolithiques accumulent du CSS inutilisé au fil du temps lorsque des fonctionnalités sont supprimées. Le CSS par composant (modules CSS, composants stylisés, utilitaires Tailwind) est plus facile à élaguer, car les styles résident avec leurs composants et sont supprimés ensemble.

Pour les grands fichiers CSS anciens : utilisez UnCSS ou PurgeCSS en mode rapport uniquement. Triez les règles selon leur fréquence d’utilisation. Extrayez et supprimez les styles clairement inutilisés provenant de modules tiers. Travaillez progressivement afin d’éviter de supprimer accidentellement les styles correspondant à des états limites.

Que mesure le panneau Couverture de Chrome DevTools ?

L’analyse de couverture du CSS avec les panneaux Couverture de DevTools et Lighthouse repère les règles inutilisées. PurgeCSS et Tailwind JIT automatisent la suppression du code mort. Les modules CSS et le fractionnement par itinéraire empêchent l’accumulation de styles inutilisés. Ensemble, ils réduisent au minimum la taille du CSS et le temps d’analyse.