Blocs, éléments et modificateurs (BEM)

Lorsque vous travaillez sur des projets plus importants qui ont un site Web plus important, vous devez suivre certaines instructions et directives, qu’il s’agisse d’optimiser le site ou de le maintenir.

BEM (Block Element Modifier) ​​est une convention de dénomination populaire pour les classes CSS qui permet d’accélérer le processus de développement et d’améliorer le travail d’équipe entre les développeurs en organisant les classes CSS en modules indépendants.

Le concept principal derrière BEM est de décomposer la structure HTML en blocs réutilisables (c’est-à-dire, « blocs »), qui contiennent des éléments plus petits (c’est-à-dire, « éléments ») qui composent le bloc. Ces éléments peuvent ensuite être modifiés à l’aide de classes supplémentaires (c’est-à-dire des « modificateurs ») pour créer différentes variantes du même bloc.

En utilisant BEM, les développeurs peuvent créer des composants modulaires indépendants faciles à gérer et à entretenir. Cela accélère non seulement le processus de développement, mais permet également à plusieurs développeurs de travailler plus facilement sur le même projet puisque chaque module est autonome et peut être développé indépendamment.

De plus, BEM peut aider à améliorer l’organisation et la clarté de votre code, puisque la convention de nommage fournit un moyen clair et cohérent de nommer vos classes. Cela facilite la compréhension et la mise à jour de votre code au fil du temps.

Dans l’ensemble, BEM est un outil puissant pour créer des composants modulaires et réutilisables en CSS. En utilisant efficacement la convention de dénomination BEM, vous pouvez accélérer le développement, améliorer le travail d’équipe et créer un code plus organisé et maintenable.

Les optimisations se présentent sous différentes formes. Nous pouvons optimiser le code par le backend ou le frontend ou même en appliquant certaines méthodes traditionnelles comme le CSS atomique.

Aujourd’hui, je vais vous présenter BEM. Et ses utilisations et comment structurer le code si vous travaillez dans une équipe de plusieurs développeurs front-end et back-end.

En suivant la méthodologie BEM, les développeurs peuvent écrire des CSS plus faciles à lire, à comprendre et à entretenir. La convention de dénomination BEM fournit une structure claire pour les classes, ce qui facilite la recherche et la modification des styles.

Blocs, éléments et modificateurs (BEM)

Disons que nous construisons un site Web. Il y aura un en-tête, un pied de page et un menu évidents.

L’utilisation de cette convention de nommage permet de comprendre facilement la relation entre les différentes parties du menu et de les modifier sans affecter les autres parties de la page.

Comprenons avec un exemple

<div class="card">
  <img class="card__image" src="https://www.tothenew.com/blog/blocks-elements-and-modifiers-bem/example.jpg">
  <div class="card__content">
    <h2 class="card__title">Card Title</h2>
    <p class="card__text">Card text goes here.</p>
    <button class="card__button">Click Me</button>
  </div>
</div>

Si vous examinez l’exemple, vous pouvez clairement voir que le composant CARD commence par une seule classe, c’est-à-dire « carte » connue sous le nom de BLOC

Maintenant, les sous-classes, c’est-à-dire card__image, card__title, card__content, card__text, card__button sont ses ÉLÉMENTS

MODIFICATEURS

Comprenons maintenant les modificateurs avec différents exemples :

.button {
  /* default styles for all buttons */
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}

En utilisant la classe de modificateur .button–primary, nous pouvons facilement modifier l’apparence du bouton sans avoir à créer une classe distincte ou à modifier les styles de bouton par défaut. Cela facilite la création de variantes de composants sans encombrer le code HTML ou CSS.

Bloc:

Dans la méthodologie BEM, un « bloc » fait référence à un composant ou module autonome de l’interface utilisateur. Il représente une seule entité discrète qui peut être réutilisée sur plusieurs pages et contextes.

Les blocs sont généralement nommés en fonction de leur objectif fonctionnel ou sémantique et sont représentés en HTML à l’aide d’un nom de classe commençant par le nom du bloc, suivi de tout modificateur ou élément enfant facultatif.

Par exemple, un bloc pour un menu de navigation pourrait être nommé « menu » et serait représenté en HTML en utilisant le nom de classe « menu ». Si le menu avait une variation avec une couleur d’arrière-plan différente, une classe de modificateur pourrait être ajoutée, telle que « menu–dark ». Les éléments enfants du bloc, tels que les éléments de menu individuels, seraient représentés comme des éléments du bloc, en utilisant une syntaxe de double trait de soulignement, telle que « menu__item ».

En décomposant l’interface utilisateur en blocs indépendants et réutilisables, les développeurs peuvent créer un code plus maintenable, évolutif et modulaire. Chaque bloc peut être développé et testé de manière isolée et peut être facilement réutilisé sur différentes pages et contextes.

<div class="menu">
</div>

Élément:

Dans la méthodologie BEM, un « élément » est une partie d’un bloc qui exécute une fonction spécifique au sein de ce bloc. Les éléments sont toujours limités à leur bloc parent et leurs noms de classe reflètent cette hiérarchie.

Les noms de classe d’élément sont formés en concaténant le nom de la classe de bloc parent, deux traits de soulignement et le nom de l’élément. Par exemple, si nous avons un bloc appelé « menu » et un élément dans ce bloc appelé « item », le nom de la classe d’élément serait « menu__item ».

Les éléments peuvent également avoir leurs propres modificateurs, qui sont ajoutés au nom de la classe d’éléments avec deux traits d’union. Par exemple, si nous voulions créer une version modifiée de l’élément « menu__item » appelée « menu__item–active », nous ajouterions le modificateur « –active » à la fin du nom de la classe d’élément.

L’utilisation d’éléments dans BEM permet un contrôle plus précis du style et du comportement des composants individuels dans un bloc, tout en conservant la structure et l’organisation globales du bloc lui-même. Cela facilite la réutilisation et la modification des composants dans un bloc et réduit le risque de modifications involontaires d’autres parties du bloc.

<div class="menu">
<div class="menu__item"></div>
</div>

Modificateurs :

Dans la méthodologie BEM, un « modificateur » est un nom de classe supplémentaire utilisé pour modifier l’apparence ou le comportement d’un bloc ou d’un élément. Les modificateurs sont utilisés pour créer des variantes d’un bloc ou d’un élément sans avoir besoin de code CSS supplémentaire.

Les modificateurs sont généralement utilisés pour exprimer des états ou des variations d’un bloc ou d’un élément, tels que la taille, la couleur, l’orientation ou l’état (comme actif, désactivé, etc.). Les classes de modificateurs sont ajoutées au nom de la classe de blocs ou d’éléments à l’aide de deux traits d’union (–). Par exemple, un bloc de boutons peut avoir un modificateur « bouton–large » pour l’agrandir.

Les modificateurs d’élément suivent la même convention de dénomination que les modificateurs de bloc mais sont limités à l’élément. Par exemple, une classe « menu__item–active » serait utilisée pour modifier un élément d’élément de menu spécifique dans le bloc de menu.

Les modificateurs peuvent être enchaînés pour créer des variations plus spécifiques. Par exemple, un bloc de boutons avec un modificateur « bouton–large » pourrait également avoir un modificateur « bouton–primaire » pour créer un gros bouton de couleur primaire.

L’utilisation de modificateurs dans BEM permet une plus grande flexibilité dans le style et le comportement, tout en conservant une convention de dénomination et une structure organisationnelle cohérentes. Cela réduit également le besoin d’écrire du code CSS supplémentaire pour obtenir des variations de conception ou de fonctionnalité.

<div class="menu">
<div class="menu__item">
<div class="menu__item-active"></div>
</div>
</div>

Avantages de l’utilisation de BEM

Modularité et réutilisabilité: BEM promeut un code modulaire et réutilisable en décomposant une page Web en blocs, éléments et modificateurs indépendants.

Convention de dénomination claire et cohérente : BEM fournit une convention de dénomination claire et cohérente pour les classes qui suit une structure spécifique, ce qui facilite la compréhension et la modification du code.

Performance: BEM peut aider à améliorer les performances d’un site Web en réduisant la taille du fichier CSS. En utilisant une approche modulaire et en réutilisant le code, BEM peut aider à minimiser la quantité de CSS qui doit être chargée, ce qui entraîne des temps de chargement plus rapides pour les utilisateurs.

En conclusion, adopter la méthodologie BEM (Block, Element, Modifier) ​​apporte de nombreux avantages aux projets de développement web. En organisant notre code en composants autonomes et réutilisables, nous pouvons améliorer la maintenabilité, l’évolutivité et la collaboration au sein de nos équipes. Veuillez vous référer à nos blogs pour une meilleure compréhension des sujets techniques.