BEM CSS

BEM Visão geral

BEM (Block-Element-Modifier) é uma convenção de nomeação CSS desenvolvida pela equipe da Yandex para melhorar a escalabilidade e a manutenção no desenvolvimento da Web.

	/* Block Componente */
.card {

}
/* Os elementos dependem do bloqueio dos pais  */ 
.card__img {

}
/* Modificadores são para mudanças incrementais de estilo */
.card--dark {

}
.card__img--large {

}
	

			
	
			

		
	

CSS BEM

• Block: um componente independente que pode ser reutilizado (por exemplo, com nome de classe .nav)
• Element: uma criança dentro de um bloco que não pode ser usado separadamente desse bloco (por exemplo, com nome de classe .nav__item)
• Modifier: uma variação no estilo de um bloco ou modificador (por exemplo, com nome de classe .nav–dark)

Blocks

• Os Blocks são componentes reutilizáveis. Como botões, cartas ou campos de formulário.
• Por exemplo, .btn ou .nav segue a convenção de nomeação correta para um bloco.

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

			
	
			

		
	

	.card {

}
	

			
	
			

		
	

Elements

• Dentro de blocos são onde os elementos vivem. Os elementos dependem do bloqueio dos pais e, portanto, não podem ser usados sem eles.
• Os elementos também têm uma convenção única de nomeação de classe CSS que funciona assim

	.block__element {

}
	

			
	
			

		
	

• Por exemplo, usando o componente .card, um elemento dentro do componente da placa (como uma imagem) teria um nome de classe como .card__img.
• O nome do elemento sempre anexa o nome do bloco, separado por um sublinhado duplo __.

CSS Exemplos

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

			
	
			

		
	

	.card {

}
.card__title {

}
.card__description {

}
	

			
	
			

		
	

É considerado a melhor prática para usar uma classe de elementos BEM e usá-lo diretamente em vez disso (como .card__img {}).

Modifiers

• Quando você tem estilos variados em blocos (ou elementos), é aí que os modificadores entram.
• Por exemplo, seu bloco ‘cartão’ pode ter uma versão clara e escura. Ou você pode ter botões primários e secundários.
• block--modifier ou block__element--modifier.

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

			
	
			

		
	

	.card {

}
.card__title {

}
.card__title--large {

}
	

			
	
			

		
	

Esses são os fundamentos para tirá-lo e correr com o BEM.

Se você estiver interessado em saber mais sobre o ‘porquê’ por trás do BEM, recomendo conferir este artigo do CSS Tricks.