BEM
HTML / CSS 🟢 JuniorDefinition
Convention de nommage Block-Element-Modifier qui structure les classes CSS. Block = composant, Element = partie interne (__), Modifier = variante (--).
Analogie
Comme un système d'adresse : Pays__Ville--Quartier identifie précisément chaque zone.
Exemple de code
/* Block */
.card {}
/* Element */
.card__title {}
.card__body {}
/* Modifier */
.card--featured {}
.card__title--large {}Cas d'usage
Organiser le CSS de projets moyens à grands pour éviter les conflits de nommage et clarifier les relations.
Anti-pattern
Imbriquer des blocks dans des elements (.card__header__title) au lieu de créer un nouveau block.