Repérer les règles mortes

Une feuille de style ancienne contient souvent des règles qui ne correspondent plus à la page, mais une règle apparemment inutilisée peut encore servir dans un menu ouvert, un formulaire invalide ou une autre page du site. La supprimer sans vérification peut faire disparaître un état utile, parfois loin de la zone que vous êtes en train d’examiner. Vous allez vous servir des outils du navigateur pour établir des indices, puis confirmer chaque suppression dans les conditions pertinentes.

Mesurer ce qui est utilisé pendant une session

Les outils de développement des navigateurs proposent une mesure de couverture CSS. Elle indique quelles règles ou déclarations ont été utilisées pendant l’enregistrement d’une session, et lesquelles n’ont pas été observées. Dans Chrome ou Edge, ouvrez les outils de développement, affichez le panneau Coverage depuis le menu des outils supplémentaires, puis démarrez l’enregistrement et rechargez la page de l’atelier.

La mesure associe les ressources CSS chargées à une quantité de code utilisée et non utilisée durant cette session. Sélectionnez la feuille concernée pour ouvrir la ressource et repérer les portions signalées comme non couvertes. La couverture est un constat sur les interactions effectuées, pas une preuve qu’une règle est définitivement morte : un état non activé ou une page non visitée ne peut pas être comptabilisé comme utilisé.

Élargir l’observation avant de conclure

Pour la page de l’atelier, une simple visite initiale ne couvre pas nécessairement le menu mobile, le lien de contact au survol, les champs de formulaire en erreur ou une éventuelle confirmation d’envoi. Répétez l’observation après avoir déclenché les interactions disponibles et à différentes largeurs d’écran. Si la même feuille sert plusieurs pages, ouvrez chacune d’elles : la couverture d’une page ne dit rien sur les règles utilisées ailleurs.

• Page de présentation chargée, à largeur mobile et à largeur bureau.
• Navigation ouverte puis refermée, si un menu interactif existe.
• Liens et boutons parcourus au clavier, avec leurs états de focus.
• Formulaire testé dans ses états initial, invalide et confirmé, s’il est présent.
• Pages supplémentaires couvertes par la même feuille vérifiées séparément.

Supprimer une règle par petites étapes

Prenez une règle candidate, recherchez son sélecteur dans le projet et vérifiez où les éléments correspondants peuvent apparaître. Pour une feuille unique du projet fil rouge, une recherche dans les fichiers HTML et les scripts peut révéler une classe créée dynamiquement ou utilisée sur une autre page. Si vous ne pouvez pas établir toutes les utilisations, conservez la règle et notez l’incertitude plutôt que de déduire son inutilité de son seul aspect ancien.

.carte-evenement {
    padding: 1rem;
    border: 1px solid #b8c8b2;
    background-color: #f4f7f1;
}

Si la recherche confirme que le sélecteur n’est utilisé nulle part et que les parcours requis ne révèlent aucune génération dynamique de cette classe, retirez cette règle isolément. Rechargez ensuite les pages concernées et répétez les interactions et largeurs notées dans votre relevé. Vérifiez concrètement l’en-tête, les horaires, les conseils et le bloc de contact ; l’absence de changement visible est un contrôle utile, mais elle ne remplace pas la vérification des autres états.

Évitez de supprimer d’un coup toutes les lignes marquées comme non couvertes : plusieurs règles peuvent former un ensemble lié, et un changement difficile à localiser complique le retour arrière. Gardez une trace des sélecteurs supprimés et de la vérification effectuée, puis enregistrez ou validez le changement dans votre historique de versions. Si un défaut apparaît, vous pourrez rétablir précisément la règle concernée et compléter les scénarios de contrôle.

À retenir

• La couverture CSS indique ce qui a été utilisé pendant un parcours précis, pas ce qui est inutile dans tout le projet.
• Testez les pages, largeurs et états interactifs avant de conclure qu’une règle est morte.
• Recherchez chaque sélecteur candidat dans l’ensemble du projet, y compris les usages produits par les scripts.
• Supprimez une règle à la fois, contrôlez le rendu et consignez les vérifications pour faciliter le retour arrière.