Qu'est-ce que la méthodologie BEM?

BEM (Bloc, Élément, Modificateur) — une méthodologie de nommage des classes en CSS pour créer un code évolutif et maintenable. Son objectif est de rendre les composants indépendants, réutilisables et faciles à modifier.

Principes fondamentaux:

Bloc: Composant indépendant, ayant un nom unique. Peut contenir des éléments et d'autres blocs.
```
<div class="card">...</div>
```
Élément: Partie du bloc qui n'a pas de signification autonome en dehors du contexte du bloc. Le nom de l'élément est séparé du nom du bloc par deux underscores (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modificateur: Ajoute un état ou modifie l'apparence/le comportement du bloc ou de l'élément. Le nom du modificateur est séparé du nom du bloc ou de l'élément par deux tirets (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Avantages:

Lisibilité: Les classes sont faciles à comprendre, la structure du composant est visible.
Réutilisation: Les composants sont indépendants et peuvent être utilisés dans différentes parties du projet.
Maintenabilité: Les changements dans un composant affectent peu les autres.
Scalabilité: Convient aux grandes équipes et projets.

Exemple de structure:

.card {
  /* Styles du bloc */
}

.card__title {
  /* Styles de l'élément */
}

.card__text {
  /* Styles de l'élément */
}

.card--featured {
  /* Styles du modificateur du bloc */
}

.button {
  /* Styles du bloc */
}

.button--primary {
  /* Styles du modificateur du bloc */
}

.button--disabled {
  /* Styles du modificateur du bloc */
}