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)