Bonnes pratiques & optimisation

11.1 Organisation : BEM

La convention BEM (Block, Element, Modifier) permet de nommer ses classes de manière logique.

• Block : Le composant parent (ex: .char-card).
• Element : Une partie du bloc (ex: .char-card__name).
• Modifier : Une variation (ex: .char-card--legendary).

<div class="char-card char-card--alliance">
  <img class="char-card__avatar" src="..." alt="Avatar">
  <h5 class="char-card__name">Varian Wrynn</h5>
</div>

11.2 Performance

Évite les sélecteurs trop complexes qui forcent le navigateur à trop de calculs.

/* ❌ Trop complexe */
main section#cours article ul li a { color: blue; }

/* ✅ Simple et direct */
.lien-de-cours { color: blue; }

11.3 Accessibilité

Un site accessible est utilisable par tous. Ne supprime jamais l'outline de focus sans le remplacer !