Limiter la spécificité des styles de composant

Un composant qui fonctionne aujourd’hui peut devenir difficile à modifier lorsque ses règles dépendent d’une structure HTML précise ou accumulent les classes. Vous allez limiter cette friction pour le bloc de conseils de la page de l’atelier : ses styles resteront locaux, et une variante pourra être ajustée sans surenchère de sélecteurs.

La cartographie des règles par zone et par responsabilité a déjà été abordée dans la leçon précédente. Ici, vous vous concentrez sur une décision plus fine : quelle force donner aux sélecteurs d’un composant pour que les règles restent modifiables dans leur couche.

Réduire la force des sélecteurs internes

La pseudo-classe :where() permet de regrouper des sélecteurs sans ajouter de spécificité. Tout ce qui se trouve entre ses parenthèses compte pour zéro dans le calcul de spécificité. Vous pouvez donc cibler les éléments internes d’un composant sans les rendre difficiles à remplacer par une règle locale ultérieure.

@layer components {
    .atelier-tips {
        padding: var(--space-4);
        color: var(--color-text);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
    }

    .atelier-tips :where(h2, p, ul) {
        margin-block: 0;
    }

    .atelier-tips :where(p, ul) {
        margin-block-start: var(--space-3);
    }

    .atelier-tips :where(ul) {
        padding-inline-start: 1.25rem;
    }
}

Le sélecteur racine .atelier-tips conserve une spécificité de classe, ce qui identifie clairement le composant. En revanche, les règles internes n’ajoutent aucune spécificité pour h2, p ou ul. Par exemple, une règle de composant ciblant une classe interne pourra les remplacer sans devoir répéter le nom du bloc plusieurs fois.

Exprimer les états près du composant

Un état ou une variante doit être lisible dans le contrat de classes du composant. Pour l’atelier, vous pouvez réserver la classe is-highlighted à une carte de conseil mise en avant. Un état de focus se traite directement sur le lien du composant, sans sélectionner un élément extérieur pour en déduire le comportement.

@layer components {
    .atelier-tip {
        padding: var(--space-3);
        background: var(--color-surface);
        border-inline-start: 0.25rem solid var(--color-border);
    }

    .atelier-tip.is-highlighted {
        border-inline-start-color: var(--color-accent);
    }

    .atelier-tip__link:focus-visible {
        outline: 0.2rem solid var(--color-accent);
        outline-offset: 0.2rem;
    }
}

La classe is-highlighted s’applique au même élément que atelier-tip : la variante est explicite et reste attachée à la carte concernée. Le sélecteur de focus cible le lien lui-même. Son contour apparaît lorsque la navigation au clavier place le focus dessus ; le résultat ne dépend pas de la présence d’un parent particulier.

<article class="atelier-tip is-highlighted">
    <h2>Conseil de la semaine</h2>
    <p>Arrosez au pied des plants, tôt le matin.</p>
    <a class="atelier-tip__link" href="#contact">Poser une question</a>
</article>

Ne pas lier le style à une structure profonde

Un sélecteur comme .atelier-tips article div p a impose que le lien reste enfoui dans cette succession précise d’éléments. Un changement de balisage peut alors casser le style, même si le rôle du lien n’a pas changé. Préférez une classe d’élément dédiée, telle que atelier-tip__link, et ciblez-la directement.

Pour vérifier votre choix, inspectez le lien dans les outils du navigateur et examinez les règles qui correspondent à son élément. Si une règle est barrée, identifiez d’abord la déclaration concurrente et sa couche ; n’augmentez la spécificité qu’après avoir vérifié que la règle cible le bon composant et le bon état. Cette méthode évite les correctifs locaux qui rendent les prochaines retouches plus coûteuses.

À retenir

• Utilisez :where() pour cibler des éléments internes sans augmenter leur spécificité.
• Gardez les variantes et les états près des règles du composant qui les définit.
• Ciblez les éléments par leur rôle, plutôt que par une succession profonde de balises.
• Avant d’ajouter une dérogation, vérifiez la couche et la règle qui l’emporte.

Dans la prochaine leçon, vous vérifierez que ces composants restent sans effets de bord dans différents conteneurs et états.