Quels sont les avantages de la méthodologie BEM?

BEM (Bloc, Élément, Modificateur) – méthodologie de nommage des classes CSS basée sur la division de l'interface en blocs indépendants.

Avantages :

• Modularité : Permet de créer des composants d'interface réutilisables indépendamment.
• Facilité de maintenance : Grâce à une structure de nommage claire, il est plus facile de trouver et de modifier les styles sans affecter d'autres parties du projet.
• Scalabilité : Convient aux grands projets avec de nombreux développeurs, car il réduit le risque de conflits de noms de classes.
• Clarté : Les noms de classes reflètent la structure et la fonction des éléments, ce qui améliore la lisibilité du code.
• Prévisibilité : Les styles du bloc ne dépendent pas du contexte, ce qui élimine les comportements inattendus.
• Isolation : Les styles d'un bloc n'affectent pas ceux d'un autre.

Exemple :

/* Bloc bouton */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Élément icône à l'intérieur du bloc bouton */
.button__icon {
  margin-right: 5px;
}

/* Modificateur primaire pour le bloc bouton */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modificateur désactivé pour le bloc bouton */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}