Nommer un composant — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Nommer un composant

Variables, transitions, animations et projet · niveau 2

Énoncé

Le bandeau promotionnel de la rentrée a été écrit ainsi :


<aside id="promo" class="urgent">
  <h2>Rentrée : −10 % sur les manuels</h2>
  <p>Jusqu’au 30 septembre, sur présentation de la carte d’étudiant.</p>
  <a href="catalogue.html">Voir les manuels</a>
</aside>


#promo {
  padding: 1rem 1.5rem;
  background: #faf8f5;
}

#promo h2 {
  color: #1f3a68;
}

.urgent {
  background: #f3e3d3;
}

Pourquoi le fond « urgent » ne s'applique-t-il pas ?
Réécrire le HTML et la feuille dans la convention du livre (un bloc, des éléments préfixés, une variante qui ne change qu'une variable).

Corrigé

#promo a pour spécificité (1, 0, 0) ; .urgent, (0, 1, 0). Le fond de #promo l'emporte, quel que soit l'ordre des règles. C'est le piège classique de l'identifiant utilisé pour styler.
Dans la convention du livre :


<aside class="promo promo-urgente" aria-labelledby="titre-promo">
  <h2 class="promo-titre" id="titre-promo">Rentrée : −10 % sur les manuels</h2>
  <p class="promo-texte">Jusqu’au 30 septembre, sur présentation de la carte d’étudiant.</p>
  <a class="promo-lien" href="catalogue.html">Voir les manuels</a>
</aside>


.promo {
  --promo-fond: var(--creme);

  padding: 1rem 1.5rem;
  background: var(--promo-fond);
  border-left: 6px solid var(--ocre);
}

.promo-titre {
  margin: 0 0 0.5rem;
  color: var(--bleu-nuit);
}

.promo-lien {
  font-weight: 700;
  color: var(--bleu-nuit);
}

.promo-urgente {
  --promo-fond: #f3e3d3;
}

Toutes les règles ont la même spécificité, (0, 1, 0) ; la variante ne touche qu'une variable, et son effet ne dépend plus de l'ordre des règles. L'identifiant n'est plus utilisé que pour relier le titre à l'encadré. Dans la page promo.html du dossier code/ch10/exercices, Chromium calcule bien le fond rgb(243, 227, 211).