BEM

BEM Aperçu

BEM (Block-Element-Modifier) est une convention de nommage CSS développée par l’équipe de Yandex pour améliorer l’évolutivité et la maintenabilité dans le développement Web.

En termes simples, l’idée de BEM est de « diviser l’interface utilisateur en blocs indépendants » en nommant les classes CSS dans la méthodologie suivante

	/* Block component */
.card {

}
/* Les éléments dépendent de leur bloc parent */ 
.card__img {

}
/* Les modificateurs sont destinés aux modifications de style incrémentielles */
.card--dark {

}
.card__img--large {

}
	

			
	
			

		
	

• Block : composant indépendant qui peut être réutilisé (par exemple avec le nom de class .nav)
• Element : un enfant dans un bloc qui ne peut pas être utilisé séparément de ce bloc (par exemple, avec le nom de class .nav__item)
• Modifier : variation du style d’un bloc ou d’un modificateur (par exemple avec le nom de class .nav–dark)

Blocks

• Les blocs sont des composants réutilisables. Comme des boutons, des cartes ou des champs de formulaire.
• Lorsque vous nommez vos blocs, concentrez-vous sur la description de leur but (c’est-à-dire ce qu’ils sont) plutôt que de leur état (c’est-à-dire à quoi ils ressemblent).
• Par exemple, .btn ou .nav suit la convention de dénomination correcte pour un bloc.

	<div class="card">
 <h2>...</h2>
 <p>...</p>
</div>
	

			
	
			

		
	

	.card {

}
	

			
	
			

		
	

Element

• À l’intérieur des blocs, les éléments vivent. Les éléments dépendent de leur bloc parent et ne peuvent donc pas être utilisés sans eux.
• Les éléments ont également une convention de dénomination de classe CSS unique qui fonctionne comme ceci

.block__element

• Par exemple, en utilisant le composant .card, un élément à l’intérieur du composant card (comme une image) aurait un nom de classe comme .card__img
• Le nom de l’élément ajoute toujours le nom du bloc, séparé par un double trait de soulignement __.

	<div class="card">
 <h2 class="card__title" >...</h2>
 <p class="card__description" >...</p>
</div>
	

			
	
			

		
	

	.card {

}
.card__title {

}
.card__description {

}
	

			
	
			

		
	

BEM CSS

Modifiers

• Lorsque vous avez différents styles dans les blocs (ou les éléments), c’est là que les modificateurs entrent en jeu.
• Les modificateurs ont une convention de nommage CSS unique qui fonctionne comme ceci:
• block--modifier ou block__element--modifier.

	<div class="card card--dark">
 <h2 class="card__title card__title--large">...</h2>
 <p>...</p>
</div>
	

			
	
			

		
	

	.card {

}
.card--dark {

}
.card__title {

}
.card__title--large {

}
	

			
	
			

		
	

CSS BEM

Ce sont les principes fondamentaux pour vous faire démarrer avec BEM.

Si vous souhaitez en savoir plus sur le « pourquoi » derrière BEM, je vous recommande de consulter cet article CSS Tricks.