BEM (Block Element Modifier)
Le BEM (Block Element Modifier) est une méthodologie utilisée pour structurer le code CSS de manière à le rendre plus lisible et maintenable. Elle repose sur une convention de nommage qui distingue les blocs, les éléments et les modificateurs.
De quoi parle-t-on ?
BEM, acronyme de Block Element Modifier, est une méthodologie de développement frontend qui vise à améliorer la lisibilité et la maintenabilité du code CSS. Développée par Yandex, une entreprise russe renommée pour ses services en ligne, BEM repose sur une convention de nommage stricte et modulaire. Son objectif principal est de rendre le code plus compréhensible et de faciliter la collaboration entre les développeurs sur des projets de grande envergure.
La convention de BEM divise le code en trois parties principales : les blocs, les éléments et les modificateurs. Un bloc est un composant indépendant qui représente une partie fonctionnelle de l'interface utilisateur, comme un formulaire ou un bouton. Un élément constitue une partie du bloc qui a une fonction spécifique, par exemple, un label ou une icône à l'intérieur d'un bouton. Un modificateur est une entité qui modifie l'apparence ou le comportement d'un bloc ou d'un élément.
La syntaxe BEM se compose généralement de trois parties séparées par des double tirets et des underscores. Par exemple, un bloc pourrait être nommé .button, un élément à l'intérieur de ce bloc pourrait être .button__icon, et un modificateur de ce bloc serait .button--large. Cette structure permet d'identifier facilement la hiérarchie et les relations entre les différents composants, ce qui simplifie le processus de développement et de maintenance.