Froggiesplaining :

🎯 Objectifs de cet exercice :
Comprendre et appliquer la méthodologie BEM pour nommer les classes CSS de manière claire et maintenable.

📦 Qu'est-ce que BEM ?
BEM signifie "Block – Element – Modifier" (Bloc – Élément – Modificateur).
C'est une convention de nommage CSS qui rend le code plus lisible, organisé et facile à maintenir.

🏗️ Les trois composants de BEM :

• BLOCK (Bloc) : Le composant parent, autonome et réutilisable
  • Exemple : .navbar, .header, .card
  • C'est le conteneur principal d'un composant
• ELEMENT (Élément) : Une partie du bloc qui n'a pas de sens en dehors de ce bloc
  • Syntaxe : block__element (double underscore)
  • Exemple : .navbar__menulist, .navbar__menulink
  • L'élément appartient toujours à un bloc parent
• MODIFIER (Modificateur) : Une variation ou un état du bloc ou de l'élément
  • Syntaxe : block--modifier ou block__element--modifier (double tiret)
  • Exemple : .button--large, .navbar__menulink--custom
  • Change l'apparence, le comportement ou l'état

✨ Exemple concret dans cette page :
.maintitle → Bloc parent
.maintitle__logo → Élément logo du bloc maintitle
.maintitle__h1 → Élément h1 du bloc maintitle
.maintitle__h1--violet → Élément h1 avec modificateur violet

💡 Avantages de BEM :

• ✅ Clarté : On sait immédiatement où se situe chaque élément dans la structure
• ✅ Maintenabilité : Plus facile de modifier le CSS sans casser d'autres éléments
• ✅ Réutilisabilité : Les composants sont indépendants et réutilisables
• ✅ Évite les conflits : Pas de problèmes de spécificité CSS

🔧 Exercice pratique :
Reprenez une page d'un exercice précédent avec un conteneur et plusieurs éléments "enfants" et appliquez la convention BEM dessus !