BEM Metodologia em CSS

Última atualização em Sábado 7º mai 2022

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.