Écrire du CSS propre et organisé est important, en particulier pour les projets de plus grande envergure. L'une des meilleures façons de structurer votre CSS consiste à utiliser la convention de dénomination BEM. Dans cet article, nous expliquerons ce qu'est le BEM, pourquoi il est important, ses avantages et ses inconvénients, et vous montrerons comment l'utiliser avec deux exemples.

Qu’est-ce que le BEM ?

BEM signifie Block, Element et Modifier. Il s'agit d'un système de dénomination permettant d'écrire des noms de classes CSS qui rend votre code plus facile à comprendre et à maintenir. L'objectif principal de BEM est d'aider les développeurs à écrire du CSS réutilisable, modulaire et évolutif.

1. Bloc : Un composant autonome qui a du sens en soi (par exemple, un bouton ou un formulaire).
2. Élément : Une partie du bloc qui n'a aucune signification en soi et qui dépend du bloc (par exemple, une icône de bouton).
3. Modificateur : Une version différente d'un bloc ou d'un élément (par exemple, un bouton avec une couleur différente).

.block {}
.block__element {}
.block--modifier {}

Pourquoi utiliser BEM ?

L'utilisation de BEM vous aide à éviter les CSS désordonnés et déroutants. Il apporte plusieurs avantages :

• Cohérence : Tous les noms de classe suivent le même modèle, ce qui rend votre code plus prévisible et plus facile à comprendre.
• Réutilisabilité : Les blocs et les éléments peuvent être réutilisés dans différentes parties d'un projet.
• Maintenance facile : D'autres développeurs peuvent facilement lire et modifier votre code.
• Évite les conflits : BEM vous aide à éviter les conflits CSS entre différents composants.

Comment utiliser BEM : exemples

Exemple 1 : un simple bouton

Commençons par un bloc de boutons de base et voyons comment fonctionne BEM.

HTML :

  Submit

CSS :

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

Explication:

• Le bouton est un bloc représentant le style du bouton principal.
• bouton - primaire est un modificateur, appliquant un arrière-plan bleu à cette version de bouton spécifique.

Exemple 2 : un composant de carte

Créons maintenant un bloc de cartes avec un titre et une description (éléments), ainsi qu'une version de petite taille (modificateur).

HTML :

  
Title
  
This is a description.

CSS :

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

Explication:

• card est un bloc représentant le composant de la carte.
• card__title et card__description sont des éléments, des parties spécifiques de la carte.
• card - small est un modificateur, réduisant le remplissage de la version plus petite de la carte.

Avantages et inconvénients du BEM

Avantages :

1. Organisé et cohérent : Aide à garder votre CSS propre et bien structuré.
2. Évite les conflits CSS : Réduit le risque que les styles d'un composant en affectent un autre.
3. Réutilisabilité : Les blocs et les éléments peuvent être utilisés à plusieurs endroits dans un projet.
4. Facile à entretenir : Facilite la mise à jour et la gestion du CSS, même à mesure que votre projet se développe.

Inconvénients :

1. Noms de classe longs : Les noms de classe BEM peuvent être assez longs, ce qui peut sembler écrasant au début.
2. Courbe d'apprentissage : Il faut un certain temps pour s'habituer à la structure BEM, surtout si vous débutez avec CSS.

Pourquoi le BEM est-il important ?

BEM est une méthodologie CSS populaire car elle favorise un code propre et évolutif. Dans les grands projets, CSS peut rapidement devenir difficile à gérer. Avec BEM, chaque nom de classe est unique et descriptif, ce qui facilite la compréhension de l'objectif de chaque classe. Cela évite également les problèmes tels que les conflits de style et facilite la collaboration entre les développeurs.

Si vous souhaitez une manière cohérente et modulaire d'écrire du CSS, BEM est un excellent choix. L'apprentissage peut prendre un certain temps, mais à long terme, cela vous fera gagner du temps et rendra votre CSS plus maintenable.

Conclusion

La convention de dénomination BEM est un excellent moyen de garder votre CSS organisé et évolutif. Cela permet d'éviter les conflits, rend votre code plus maintenable et favorise les composants réutilisables. Même si cela peut sembler difficile au début en raison de la longueur des noms de classe et de la courbe d’apprentissage, les avantages dépassent de loin les inconvénients. Si vous souhaitez écrire du CSS plus propre et améliorer la collaboration dans vos projets, essayez BEM !

Suivez-moi pour plus de mises à jour !

J'espère que vous avez trouvé cet article utile pour comprendre les conventions de dénomination CSS BEM. Si vous souhaitez rester informé d'autres articles comme celui-ci, de conseils et d'informations sur le développement Web, assurez-vous de me suivre. N'hésitez pas à nous contacter si vous avez des questions ou des suggestions. J'aimerais avoir de vos nouvelles !