Ter padrões de desenvolvimento é essencial para que códigos sejam escritos de forma organizada e estruturada, especialmente quando trabalhando com outros programadores em projetos, pois cada programador tem a sua forma específica de programar, estruturar o código e nomear as suas classes e variáveis, e sem um padrão, o código do projeto possui a tendência de ficar muito bagunçado, visto que diferentes pessoas estarão escrevendo códigos de maneiras diferentes.
A nomenclatura ou metodologia BEM (Block Element Modifier) define o padrão que devemos utilizar para nomear as nossas classes CSS, separando as classes do layout em três partes: blocos, elementos e modificadores.
Dessa forma, se todos os programadores de um projeto conhecerem e utilizarem esse padrão, as classes CSS do código sempre terão o mesmo formato, tornando o código muito mais organizado.
Nesse artigo você vai aprender como utilizar a nomenclatura BEM corretamente e também conhecer os principais erros que programadores cometem utilizando a nomenclatura BEM para que você possa evitá-los.
<div class="block">
<div class="block__element"></div>
<div class="block__element">
<div class="block__another-element"></div>
</div>
<div class="block__element block__element--modifider"></div>
</div>
O que é o Bloco?
É como se fosse o container em volta do seu código, o bloco pode ter vários elementos dentro dele, o seu nome deve trazer muito significado, visto que o bloco será o "elemento pai" de várias elementos que serão os "elementos filho".
📖 Sintaxe:
<body>
<div class="block">...</div>
...
<div class="second-block">
...
<div class="third-block"></div>
...
</div>
...
</body>
✍🏻 Exemplo:
<body>
<div class="gallery">...</div>
<div class="card">...</div>
<div class="accordion"></div>
</body>
O que é o Elemento?
É a parte interna do bloco, são pedaços de código que são amarrados e possuem o seu significado atrelado ao seu bloco.
Para nomear um elemento, deve se fazer da seguinte forma: block__element, ou seja, é utilizado o nome da classe de bloco, após é acrescentado 2 caracteres de underline e por fim se adiciona o nome da classe de elemento.
📖 Sintaxe:
<body>
<div class="block">
<div class="block__element"></div>
</div>
</body>
✍🏻 Exemplo:
<body>
<div class="media-gallery">
<div class="media-gallery__tabs">...</div>
<div class="media-gallery__posts">...</div>
<div class="media-gallery__pagination">...</div>
</div>
<div class="card">
<div class="card__header">...</div>
<div class="card__content">...</div>
<div class="card__footer">...</div>
</div>
</body>
O que é o Modificador?
Seu nome é auto explicativo, ele é responsável por modificar os estilos de blocos ou elementos, dessa forma, representando diferentes variações de estilização de blocos e estilos, como por exemplo: active, disabled, open, error e small.
Para nomear um modificador de bloco, se deve fazer da seguinte forma: block--modifier, ou seja, é utilizado o nome da classe de bloco seguido de 2 caracteres de hífen, e após é adicionado o nome do modificador.
Para criar o modificador de elemento é a mesma "receita": block__element--modifier, basicamente, é utilizado a classe de elemento acrescido de 2 caracteres de hífen, com o nome do modificador ao final da classe.
📖 Sintaxe:
<body>
<div class="block--modifier">
<div class="block__element--other-modifier"></div>
</div>
</body>
✍🏻 Exemplo:
<body>
<div class="alert alert--error">...</div>
<div class="media-gallery">
<div class="media-gallery__tabs--disabled">...</div>
<div class="media-gallery__posts--empty">...</div>
</div>
<div class="card card--large">
<div class="card__header">...</div>
<div class="card__content card__content--open">...</div>
<div class="card__footer">...</div>
</div>
</body>
Os principais erros ao utilizar a nomenclatura BEM
Agora você aprendeu os princípios da nomenclatura BEM e o melhor caminho para fixar todo esse conteúdo é praticar, visto que "é praticando, que se aprende", no entanto, durante essa prática podem surgir muitas dúvidas e erros na utilização do BEM podem acontecer.
Abaixo trago os principais erros que eu cometi e que também vi outros programadores errarem na utilização do BEM, espero que isso te ajude na sua jornada de aprendizado. 🙋🏻♂️
Posso ter elementos dentro de elementos?
Não, os elementos devem se referenciar à um bloco e não à outros elementos.
❌ Incorreto
<div class="block">
<div class="block__element">
<div class="block__element__other-element">...</div>
</div>
</div>
✅ Correto
<body>
<div class="block">
<div class="block__element">
<div class="block__other-element">...</div>
</div>
</div>
</body>
Posso ter blocos dentro de blocos?
Sim, isso normalmente faz sentido quando um elemento se tornou muito grande ou complexo, nesse caso, você pode tornar esse elemento em um bloco, que não precisa ter relação com o seu "bloco pai".
✅ Correto
<body>
<div class="block">
...
<div class="second-block">
<div class="second-block__element">..</div>
<div class="second-block__second-element">...</div>
<div class="second-block__third-element">...</div>
</div>
...
</div>
</body>
Posso aplicar modificadores de classe também em blocos?
Sim, você pode utilizar modificadores nas suas classes de bloco, no entanto, é necessário que a classe de bloco também esteja presente na tag HTML.
✅ Correto
<div class="block block--modifier">...</div>
❌ Incorreto
<div class="block--modifier">...</div>
Conclusão
A nomenclatura BEM é uma das metodologias mais utilizadas para padronização de classes CSS, espero ter conseguido te ensinar a forma correta de utilizá-la ela e te passar a importância de sua utilização.