Projet : sélecteurs sans effets de bord
Livre une couche de sélecteurs maintenable avec des règles groupees par intention.
Objectifs de la leçon
- Livrer une couche de sélecteurs maintenable.
- Éviter un rendu fragile difficile à maintenir.
- Prouver la correction de .course-card.
Intention
Le composant cible est .course-card.
La correction doit éviter un rendu fragile difficile à maintenir.
Tu ne cherches pas seulement un rendu agreable : tu dois pouvoir expliquer pourquoi cette règle existe, quel problème elle réduit et quel autre composant elle ne doit pas toucher.
Méthode
Ajoute une règle courte, puis inspecte la declaration active.
Compare le rendu avant/apres au lieu de te fier à l'impression visuelle.
Si tu dois ajouter trois declarations pour masquer un seul symptome, reviens à la cible et séparé structure, espace, couleur et état interactif.
Validation
Teste mobile, desktop, focus et contenu long.
Garde seulement les declarations qui portent une intention.
La revue finale doit pouvoir citer un sélecteur, une declaration active et un effet observable dans le rendu.
Vocabulaire lié
- sélecteur — Cible de la règle CSS.
- preuve — Observation qui confirme le rendu.
- regression — Defaut ajoute par une correction.
Validation
- Je connais la cible.
- Je peux citer la preuve.
- Je limite les effets de bord.