BEM
Block, Element, Modifier
Convention de nommage des classes CSS
.block__element--modifier
.window__content--active
.window {
}
.window__content {
}
.window__content--active {
}
Nomenclatures alternatives
- Style "Two dashes"
block-name__elem-name--mod-name--mod-val
- Style "CamelCase"
blockName-elemName_modName_modVal
- Style "React"
BlockName-ElemName_modName_modVal
- Style "No Namespace style"
_available
-
interface utilisateur divisée en blocs indépendants
-
les blocs sont composés d'éléments
-
aux éléments peuvent être ajoutés des modificateurs dans le cas de petites variantes
Avantages
- explicite
- incite à la création de feuilles de style performantes en limitant l'usage des cascades CSS (en CSS, seul le premier niveau de sélection est performant).
- permet de construire des applications tout en travaillant toujours à une échelle réduite : le contexte d'un bloc.
- en accord avec le principe de composants web
- création de template grâce aux blocs utilisables plusieurs fois
Inconvénients
- syntaxe peu concise
- principe des classes transversales en CSS est en opposition avec le principe d'isolation des blocs de BEM
Brush up your english (bonus)
https://en.bem.info/methodology/naming-convention/
Source:
BEM
By lucytbcz
BEM
- 173