Concevoir une API de variantes

Un bloc de contact peut apparaître dans plusieurs contextes : intégré au contenu de la page ou mis en évidence comme appel à l’action. Si vous créez une règle globale pour changer son apparence, vous risquez de modifier d’autres zones sans le vouloir. Vous allez définir une API de variantes explicite, portée par le composant lui-même.

La leçon précédente vous a appris à distinguer les règles globales, celles de mise en page et celles des composants ; ici, vous appliquez ce découpage à une seule responsabilité visuelle. Une API de variantes est le petit ensemble de classes que le HTML peut employer pour demander une présentation définie. Le composant garde une apparence de base, puis une classe de modificateur sélectionne une variation documentée.

Définir le contrat du composant

Pour le projet de l’atelier de jardinage, le bloc porte le nom contact. Son contrat comporte une classe de base obligatoire, contact, et une classe facultative, contact--accent. La première garantit le fonctionnement et l’apparence standard ; la seconde demande une présentation plus visible, par exemple sur un fond vert pâle avec un bouton plus marqué.

<section class="contact" aria-labelledby="contact-title">
    <h2 class="contact__title" id="contact-title">Contacter l’atelier</h2>
    <p class="contact__text">Une question sur les horaires ou le matériel ? Écrivez-nous.</p>
    <a class="contact__link" href="mailto:[email protected]">[email protected]</a>
</section>

<section class="contact contact--accent" aria-labelledby="contact-accent-title">
    <h2 class="contact__title" id="contact-accent-title">Réserver une place</h2>
    <p class="contact__text">Les places sont limitées pour le prochain atelier.</p>
    <a class="contact__link" href="mailto:[email protected]">Nous contacter</a>
</section>

Les deux sections partagent les mêmes éléments : un titre, un texte et un lien. Seule la classe du bloc diffère. Cette régularité forme le contrat entre le HTML et le CSS : si vous ajoutez une nouvelle occurrence, vous pouvez choisir la présentation standard ou accentuée sans créer une structure parallèle.

Écrire les styles de base et la variante

Commencez par les styles partagés, puis ajoutez uniquement les différences de la variante. Les variables définies dans :root centralisent les choix visuels ; les propriétés personnalisées locales au bloc permettent ici de changer les couleurs sans recopier toutes les règles. Les éléments internes consomment ces propriétés, qu’elles proviennent du composant de base ou du modificateur.

:root {
    --color-text: #24342c;
    --color-surface: #ffffff;
    --color-border: #c8d4cb;
    --color-accent: #245b3d;
    --color-accent-soft: #e8f2e9;
    --space-2: 0.5rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
}

.contact {
    --contact-surface: var(--color-surface);
    --contact-border: var(--color-border);
    --contact-link: var(--color-accent);

    padding: var(--space-6);
    color: var(--color-text);
    background: var(--contact-surface);
    border: 1px solid var(--contact-border);
    border-radius: 0.75rem;
}

.contact--accent {
    --contact-surface: var(--color-accent-soft);
    --contact-border: var(--color-accent);
    --contact-link: #173f29;
}

.contact__title {
    margin: 0 0 var(--space-2);
    font-size: 1.25rem;
}

.contact__text {
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}

.contact__link {
    color: var(--contact-link);
    font-weight: 700;
    text-underline-offset: 0.15em;
}

La classe contact--accent ne redéfinit ni la structure ni les marges des éléments. Elle remplace seulement les valeurs locales de fond, de bordure et de lien ; les règles communes restent actives. Résultat : le premier bloc conserve un fond blanc et une bordure discrète, tandis que le second reçoit un fond vert pâle, une bordure verte et un lien plus sombre.

Rendre les états prévisibles

Une variante est utile lorsqu’elle a un sens stable et une portée claire. Ici, « accent » signifie toujours que le bloc contact est mis en avant ; ce nom ne doit pas servir à modifier arbitrairement sa largeur ou son emplacement. Réservez ces responsabilités à la mise en page qui contient le bloc, plutôt que d’accumuler dans la classe des changements sans rapport.

Les variantes doivent aussi rester prévisibles quand le contenu varie. Un titre plus long ou un lien différent ne doit pas dépendre de la classe accentuée pour rester lisible : les règles communes conservent les espacements et la typographie. Si une nouvelle différence visuelle est nécessaire, ajoutez-la au contrat et vérifiez qu’elle répond à un besoin récurrent, plutôt que de créer une classe pour une occurrence isolée.

À retenir

• Définissez une classe de base nécessaire et des modificateurs facultatifs, explicites et documentés.
• Gardez la même structure HTML pour les variantes d’un composant.
• Placez les différences de présentation dans le modificateur et conservez les règles partagées dans le composant.
• Donnez à chaque variante un sens stable ; ne lui faites pas porter la responsabilité de la mise en page environnante.

Dans la prochaine leçon, vous réduirez l’impact de la spécificité des règles de composant afin de faciliter leur surcharge contrôlée.