Vérifier l’absence d’effets de bord

Un bloc horaire qui paraît correct dans la page principale peut déborder dans une colonne étroite ou adopter une couleur inattendue dans une autre section. Ces écarts viennent souvent de règles dépendantes du contexte ou de styles hérités que le composant n’était pas censé recevoir. Vous allez tester les blocs horaires et conseils dans plusieurs environnements avant de les réutiliser.

La cartographie des responsabilités et les risques liés à la cascade ont été étudiés dans les leçons précédentes. Ici, vous ne repartez pas de la feuille entière : vous prenez un composant défini et vérifiez que son apparence dépend principalement de son propre contrat, plutôt que de l’endroit où il est placé.

Préparer un test de réutilisation

Pour la page de l’atelier, vous disposez d’un bloc d’horaires et d’un bloc de conseils pratiques. Testez chacun dans au moins deux conteneurs : sa zone habituelle, puis une colonne plus étroite ou une zone latérale. Si le composant ne doit pas changer d’apparence selon son parent, son rendu doit rester cohérent ; s’il doit s’adapter, les différences doivent être prévues par une variante explicite.

Créez une page de test temporaire ou une zone de démonstration qui réutilise le même balisage. Évitez de dupliquer les règles CSS pour chaque emplacement : la duplication masque les problèmes au lieu de les révéler. Gardez des intitulés, des dates et des textes réalistes, car un contenu plus long peut faire apparaître un débordement ou une mauvaise séparation des lignes.

Exemple : horaires et conseils dans deux contextes

<main class="page-atelier">
    <section class="zone-principale" aria-label="Informations de l’atelier">
        <section class="horaires" aria-labelledby="horaires-titre">
            <h2 id="horaires-titre">Horaires des ateliers</h2>
            <ul>
                <li><span>Mercredi</span><time>14 h – 16 h</time></li>
                <li><span>Samedi</span><time>10 h – 12 h</time></li>
            </ul>
        </section>

        <section class="conseils" aria-labelledby="conseils-titre">
            <h2 id="conseils-titre">Conseils pratiques</h2>
            <p>Apportez des gants et une gourde. Les outils sont fournis sur place.</p>
        </section>
    </section>

    <aside class="colonne-laterale" aria-label="Rappel de l’atelier">
        <section class="horaires horaires--compact" aria-labelledby="rappel-titre">
            <h2 id="rappel-titre">Prochaine séance</h2>
            <ul>
                <li><span>Samedi</span><time>10 h – 12 h</time></li>
            </ul>
        </section>

        <section class="conseils conseils--encadre" aria-labelledby="rappel-conseils-titre">
            <h2 id="rappel-conseils-titre">À ne pas oublier</h2>
            <p>Prévoyez des vêtements adaptés à la météo.</p>
        </section>
    </aside>
</main>

Le balisage présente les deux composants dans une zone principale et une colonne latérale. Les variantes horaires--compact et conseils--encadre signalent des différences intentionnelles ; elles ne doivent pas être simulées par un sélecteur qui cible tous les blocs situés dans une colonne particulière.

Observer les styles hérités et les dépendances

Comparez les composants dans les deux emplacements. Vérifiez les couleurs de texte, les espacements, la largeur des éléments, les listes et la lisibilité des horaires. Portez une attention particulière aux propriétés héritées du parent, comme la couleur ou l’alignement du texte : elles peuvent modifier le rendu sans qu’une règle du composant ne les mentionne.

Un composant ne doit pas réinitialiser toutes les propriétés globales sans raison. En revanche, les propriétés importantes pour son contrat doivent être explicites : par exemple, la disposition de la liste d’horaires et l’espacement entre ses lignes. Si le résultat varie de façon inexpliquée, recherchez une règle ciblant le parent, un sélecteur lié à la structure profonde ou une propriété héritée, puis corrigez la source plutôt que d’ajouter une dérogation ponctuelle.

Construire une matrice de contrôle

Une matrice évite de tester uniquement le cas favorable. Pour chaque composant, consignez les contextes, les variantes et les états pertinents, puis notez le résultat attendu. Si un composant n’a pas d’état interactif, ne créez pas un état artificiel : marquez simplement ce point comme non applicable et vérifiez que son contenu statique ne réagit pas à des styles d’état voisins.

Exécutez les contrôles dans le navigateur et notez les écarts avant de modifier le CSS. Un résultat conforme signifie que chaque différence visuelle correspond à une variante annoncée, tandis que les propriétés communes restent stables. Après une correction, rejouez les autres lignes de la matrice : un ajustement local peut réparer un cas et en détériorer un autre.

À retenir

• Testez chaque composant dans sa zone habituelle et dans au moins un autre conteneur.
• Utilisez des variantes explicites pour les différences prévues, pas des sélecteurs dépendants du parent.
• Vérifiez les propriétés héritées et les contenus longs pour révéler les effets de bord.
• Consignez les variantes et états dans une matrice, puis rejouez les contrôles après chaque correction.