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
oublock__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.