Cartographier les règles et leurs responsabilités

Une feuille de style de plusieurs centaines de lignes devient difficile à faire évoluer lorsque chaque règle semble liée à toutes les autres. Avant de la réorganiser, vous devez savoir quelles zones elle décrit et quel rôle joue chaque groupe de règles. Cette cartographie fournit un état des lieux concret sans modifier le rendu de la page.

Partir des zones visibles de la page

Prenez la page de l’atelier de jardinage comme point de départ : elle comprend un en-tête, une zone de présentation, des horaires, des conseils pratiques et un bloc de contact. Parcourez la feuille et notez les sélecteurs associés à chacune de ces zones. Si un même sélecteur intervient dans plusieurs zones, signalez-le plutôt que de lui attribuer arbitrairement une seule responsabilité.

Pour rendre l’inventaire utile, décrivez la fonction de la règle, et pas seulement son emplacement dans le fichier. Une règle qui fixe la largeur maximale de la zone principale participe à la mise en page, même si elle apparaît juste après les règles du titre. À l’inverse, une règle de couleur peut concerner un composant précis ou définir une apparence commune : c’est son application qui permet de la classer.

Classer les règles par responsabilité

Utilisez trois catégories de travail. Les styles globaux posent les bases partagées par la page, comme la police du document ou l’apparence générale des titres. Les styles de mise en page organisent les grandes zones et leurs relations, par exemple la largeur de contenu ou l’espacement entre sections. Les styles de composant décrivent un élément identifiable et réutilisable, comme une carte d’horaire ou un bouton de contact.

Une règle peut avoir plusieurs propriétés tout en gardant une responsabilité principale. Par exemple, un sélecteur qui règle la disposition et l’espacement de la zone des conseils reste une règle de mise en page ; une règle qui donne une bordure à chaque carte conseil relève du composant. Pour les cas ambigus, indiquez la zone concernée et la raison du classement : cette note évite de transformer l’inventaire en classement mécanique fondé uniquement sur le nom du sélecteur.

/* Base commune à la page */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #26352b;
}

/* Organisation des zones principales */
.page-atelier {
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
}

.horaires {
    display: grid;
    gap: 16px;
}

/* Apparence d’un composant */
.carte-horaire {
    padding: 20px;
    border: 1px solid #9aaa8d;
    border-radius: 8px;
}

.carte-horaire h3 {
    margin-top: 0;
}

Dans cet extrait, body relève des styles globaux, .page-atelier et .horaires organisent la page, et .carte-horaire décrit un composant. La règle .carte-horaire h3 dépend du composant : elle ne concerne que les titres placés dans une carte horaire. Notez ce lien dans l’inventaire, car il indique qu’une modification de la structure HTML peut également changer les éléments auxquels la règle s’applique.

Rendre les dépendances visibles

Un sélecteur peut dépendre d’un autre sélecteur par sa structure ou par un usage partagé. Dans l’exemple, .carte-horaire h3 dépend de la présence d’un élément h3 à l’intérieur de la carte. Relevez aussi les classes utilisées dans plusieurs zones et les règles qui supposent une hiérarchie particulière. L’objectif, à cette étape, est de décrire ces liens, pas encore de les corriger.

Vous pouvez consigner le résultat dans un tableau, un document de travail ou des commentaires temporaires. Pour chaque entrée, gardez au minimum la zone, le sélecteur, la responsabilité et une dépendance éventuelle. Une règle utilisée à plusieurs endroits doit être signalée comme partagée ; la séparer de son contexte sans cette information risquerait de masquer son rôle réel.

À retenir

• Commencez par les zones concrètes de la page : en-tête, horaires, conseils et contact.
• Classez chaque règle selon sa responsabilité principale : globale, mise en page ou composant.
• Reliez les sélecteurs qui dépendent d’une structure HTML ou d’un usage partagé.
• Consignez les cas ambigus et les règles partagées sans modifier le rendu pendant l’inventaire.

À l’étape suivante, vous pourrez examiner les règles potentiellement inutilisées avec une méthode dédiée, sans confondre absence d’observation et inutilité.