Réduire les conflits entre couches

Une correction CSS peut sembler simple : changer la couleur d’un lien ou l’espacement d’un bloc. Mais si vous l’ajoutez au mauvais endroit, elle entre en conflit avec les styles existants et vous pousse à écrire un sélecteur toujours plus précis. Vous allez voir comment utiliser les couches pour résoudre ce conflit au bon niveau, sans transformer la feuille de style de l’atelier en suite de dérogations.

Dans la leçon précédente, vous avez vu comment déclarer les couches et définir leur ordre. Nous allons nous appuyer sur cette structure pour traiter un cas concret : le lien du bloc de contact doit garder une couleur lisible, même si une règle plus générale définit la couleur des liens de la page.

Comprendre la priorité avant de corriger

Pour les déclarations normales, les couches sont examinées selon l’ordre annoncé : une déclaration située dans une couche placée plus tard prend le dessus sur une déclaration concurrente d’une couche antérieure. Les déclarations normales qui ne sont dans aucune couche prennent, elles, le dessus sur celles de toutes les couches. Ainsi, ajouter une règle tout en bas de la feuille, hors de toute couche, peut contourner l’organisation que vous venez de mettre en place.

La spécificité ne départage les règles qu’après les critères de cascade qui les précèdent. Si la règle perdante est dans une couche antérieure, remplacer son sélecteur par un sélecteur plus long ne résout donc pas le problème. Vous devez d’abord vérifier où se trouvent les deux déclarations et leur ordre de couche.

Placer les exceptions dans une couche explicite

Réservez une couche tardive, par exemple exceptions, aux corrections nécessaires qui ne trouvent pas leur place dans les couches de base. Son nom signale que les règles qu’elle contient sont des écarts documentés, et non un second emplacement où écrire librement tous les styles. Gardez les sélecteurs de cette couche aussi ciblés que possible : la couche règle la priorité, tandis que le sélecteur indique précisément l’élément visé.

/* L’ordre est annoncé avant les règles des différentes couches. */
@layer reset, base, layout, components, exceptions;

@layer base {
    body {
        color: #26332b;
        font-family: Arial, sans-serif;
    }

    a {
        color: #245c3a;
    }
}

@layer components {
    .contact__link {
        color: #245c3a;
        text-decoration-thickness: 0.08em;
    }
}

/* Correction limitée au lien du bloc de contact. */
@layer exceptions {
    .contact__link {
        color: #8a3f16;
    }
}

Dans cet exemple, le lien du contact reçoit la couleur #8a3f16, car la règle ciblée se trouve dans la couche exceptions, placée après components. Il n’est pas nécessaire d’écrire un sélecteur plus lourd comme main .contact a.contact__link. Le résultat reste prévisible tant que toutes les déclarations concernées sont stratifiées et que l’ordre annoncé est conservé.

Encadrer les dérogations dans l’équipe

Une couche d’exceptions n’est utile que si son usage est limité. Convenez que les nouveaux styles ordinaires doivent rejoindre leur couche fonctionnelle, et que la couche d’exceptions sert uniquement aux écarts justifiés, par exemple une contrainte temporaire de contenu ou une règle propre à une page. Quand une exception n’est plus nécessaire, supprimez-la au lieu de la conserver comme solution permanente.

Lors d’une revue, vérifiez trois éléments : la déclaration qui impose le style, celle qui devrait le remplacer et leurs couches respectives. Si la règle souhaitée est mal placée, corrigez son emplacement ou l’ordre prévu plutôt que d’ajouter !important ou d’allonger le sélecteur. Après le changement, contrôlez le style calculé du lien et les autres zones de la page pour vous assurer que la correction n’a pas débordé.

À retenir

• Pour les déclarations normales, une couche tardive l’emporte sur une couche antérieure ; les styles normaux non stratifiés l’emportent sur les styles stratifiés.
• Placez les corrections nécessaires dans une couche d’exceptions annoncée explicitement, et gardez-les ciblées.
• Ne gonflez pas un sélecteur pour compenser un conflit d’ordre de cascade.
• Documentez les dérogations et retirez-les lorsqu’elles ne sont plus utiles.