Bonnes pratiques & optimisation
Forger un code d'élite.
Imagine : tu es un joueur de haut niveau. Savoir lancer des sorts ne suffit plus. Pour affronter les raids les plus difficiles, il te faut un équipement ("stuff") optimisé.
Les bonnes pratiques, c'est l'art de raffiner ton code pour qu'il soit performant, maintenable et accessible.
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 !
Teste ton site en naviguant uniquement avec la touche Tab pour vérifier que le focus est toujours visible.