Définition
BEM
BEM (Block, Element, Modifier) est une méthodologie de nommage pour les classes CSS qui a pour but d'améliorer la lisibilité et la maintenance du code.
Block
Un block est un composant indépendant de l'interface utilisateur. Il peut être simple ou complexe, mais doit être compréhensible et fonctionnel isolément.
Element
Un élément est une partie constituante d'un block qui a une signification sémantique. Il ne peut exister indépendamment du block.
Modifier
Un modificateur est une entité qui définit l'apparence, l'état ou le comportement d'un block ou d'un élément.
Structure de BEM
La méthode BEM divise les composants d'interface utilisateur en trois parties : les blocks, les éléments et les modificateurs. Cette division permet de diminuer les conflits entre le nommage des classes et d'améliorer la gestion des styles CSS.
Les Blocks
Les blocks sont des composants autonomes. Par exemple, un menu, un formulaire ou un bouton. Ils doivent être nommés de manière significative et suivent une convention stricte de nommage.
Les Éléments
Les éléments sont des parties d'un block et existent toujours dans le contexte de celui-ci. Par exemple, un champ de formulaire dans un block de formulaire peut être un élément.
Les Modificateurs
Les modificateurs changent l'apparence ou le comportement des blocks ou des éléments. Ils permettent de créer des variations d'un block ou d'un élément sans dupliquer le code CSS.
Avantages de la Méthodologie BEM
BEM offre plusieurs avantages tels que la clarté dans le nommage, la facilité de réutilisation des composants avec les modificateurs et une meilleure maintenance du code CSS à grande échelle.
Mise en Pratique de BEM
Pour appliquer BEM, il faut commencer par identifier les blocks de l'interface utilisateur. Ensuite, identifier les éléments qui composent ces blocks et enfin déterminer si des modificateurs sont nécessaires pour créer des variations.
A retenir :
La méthodologie BEM, en structurant les composants CSS en blocks, éléments et modificateurs, offre des avantages significatifs pour la maintenance et la réutilisabilité des styles. Les blocks sont indépendants, les éléments sont toujours dans le contexte d'un block et les modificateurs permettent des variations sans code redondant.
