BEM, qui signifie Block Element Modifier, est une méthodologie de développement CSS qui vise à améliorer la maintenabilité et la réutilisabilité des styles dans les projets web. Elle a été créée par la société Yandex en Russie et est devenue très populaire dans la communauté du développement web.
La méthodologie BEM se compose de trois concepts clés : les blocs, les éléments et les modificateurs.
Le bloc
Un bloc est une entité autonome et indépendante qui a une fonction spécifique dans l’interface utilisateur. Les blocs peuvent être des éléments d’une page web tels que des menus, des formulaires, des en-têtes, des pieds de page, etc. Les blocs peuvent également être des composants plus complexes, tels que des galeries d’images ou des carrousels.
L’élément
Les éléments sont des parties distinctes d’un bloc qui ont une fonction spécifique, mais qui ne peuvent pas exister seules. Les éléments sont toujours des enfants du bloc et sont utilisés pour structurer le contenu du bloc. Par exemple, un bouton peut être un élément d’un bloc de formulaire.
Le modificateur
Les modificateurs sont des variations des blocs et des éléments qui permettent de changer leur apparence ou leur comportement. Les modificateurs sont utilisés pour définir des variations de style pour un bloc ou un élément, tels que la taille, la couleur ou l’état actif.
En utilisant la méthodologie BEM, chaque bloc, élément et modificateur est nommé de manière structurée et prévisible en utilisant une convention de nommage spécifique. Par exemple, un bloc peut être nommé .menu, un élément peut être nommé .menu__item, et un modificateur peut être nommé .menu__item--active. Cette convention de nommage permet de créer des styles clairs et cohérents, de faciliter la maintenance et la réutilisabilité des styles, et de faciliter la collaboration entre les membres de l’équipe de développement.
Exemple de menu utilisant la méthodologie BEM
<nav class="menu">
<ul class="menu__list">
<li class="menu__item menu__item--active"><a href="#">Accueil</a></li>
<li class="menu__item"><a href="#">Produits</a></li>
<li class="menu__item"><a href="#">Services</a></li>
<li class="menu__item"><a href="#">Contact</a></li>
</ul>
</nav>
.menu {
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.menu__item {
display: inline-block;
margin-right: 10px;
}
.menu__item a {
color: #333;
text-decoration: none;
}
.menu__item--active {
font-weight: bold;
color: #c00;
}
Dans cet exemple, nous avons un menu de navigation qui utilise la méthodologie BEM pour structurer le code CSS. Le bloc principal est .menu, qui contient une liste (ul) qui est l’élément .menu__list. Chaque élément de liste (li) est un élément .menu__item. L’élément .menu__item--active est un modificateur de l’élément .menu__item, utilisé pour indiquer l’élément de menu actif.
En utilisant cette structure, il est facile de créer des styles clairs et cohérents pour notre menu de navigation, et il est également facile de maintenir et de réutiliser ces styles à l’avenir.
En conclusion, BEM est une méthodologie de développement CSS qui encourage une approche modulaire et structurée de la création de styles pour les projets web. En utilisant les concepts de blocs, d’éléments et de modificateurs, ainsi qu’une convention de nommage claire et prévisible, BEM permet de créer des styles robustes, faciles à maintenir et à réutiliser dans des projets de toutes tailles et de toutes complexités.
