Metodologia BEM para criar código legível

Introdução

Todos nós queremos que nossos códigos fiquem fáceis de ler e entender, certo?

Ao atingir esse objetivo, agregamos coerência e clareza à semântica do nosso código. Além disso, essa prática nos ajuda a trabalhar com mais eficiência, rapidez e qualidade, apoiando todos os envolvidos no projeto em questão e os que futuramente possam vir a integrar ou simplesmente “ajudar” no processo.

Hoje em dia nos deparamos com inúmeros padrões, termos e práticas quando falamos nesse assunto – todos com abordagens que visam melhorar nossas estruturas de código. No mundo do desenvolvimento web, quando falamos em CSS temos uma grande aliada: A Metodologia BEM.

BEM é a sigla para Block Element Modifier (Bloco Elemento Modificador) que consiste em um padrão de nomeação de classes para os elementos da marcação HTML baseado na função estrutural do elemento e não na sua função de apresentação.

A metodologia BEM prioriza com ênfase o adoção de ‘classes’ em lugar de IDs, por serem aquelas, reutilizáveis. Essa metodologia é utilizada seguindo técnicas que facilitam a construção do código, melhorando o desenvolvimento e a agilidade, diminuindo o tempo de manutenção e auxiliando na conservação do código.

A seguir estudaremos os conceitos e o uso da Metodologia BEM.

Meus votos que vocês gostem desta matéria e vamos pensar diferente na hora de criar interfaces web! 😁

Bloco

Bloco (block) é uma entidade independente da aplicação/website. Um bloco pode ser simples ou composto (conter outros blocos). Basicamente um bloco é um container cujos conteúdos são elementos da marcação HTML, ou ainda, outros blocos. No processo de desenvolvimento é interessante e útil criarmos marcação HTML específica para os blocos que compões a aplicação/website.

Observe na primeira imagem a seguir exemplos de blocos simples e na segunda exemplo de um bloco HEADER composto:

Um dos princípios da Metodologia BEM preconiza a independência dos blocos com a finalidade de facilitar a manutenção, pois pode ser que no futuro você tenha necessidade de mover, adicionar ou remover blocos. A independência dos blocos certamente facilitará aquelas tarefas.

Resumindo: nomeamos a classe de um bloco com um nome que o identifique. Por exemplo:

<div class="block"></div>

.block { }

Elementos

Um elemento (element) é uma espécie de “peça” do bloco. Como vimos o bloco é um container e os elementos são as peças inseridas nele e que desempenham funções específicas.

Um campo Input e um Search Button são elementos de um Search Block conforme mostrado na figura a seguir:

A Metodologia BEM sugere que a sintaxe para se nomear as classes seja formada de modo que o nome do bloco venha primeiro, logo depois o nome do elemento e que eles sejam separados por dois underscores ( __ ) (sim, o nome é underscore, o termo underline é outro).

A sintaxe é conforme o exemplo mostrado a seguir:

<div class="block__element"></div>

.block__element { }

À primeira vista pode parecer um pouco estranho, mas com o tempo nos acostumamos e entendemos que essa prática ajuda muito no trabalho. É tranquilo que cada um crie sua própria semântica baseando na metodologia, mas o mais importante é manter a clareza e simplicidade do código.

Observe a seguir outros exemplos:

.header__logo { } 
.header__slogan { }
.header__searchbar { }
.header__menu { }

Modificadores

Modificador (modifier) é a cereja do bolo!

Até aqui, vimos que as classes são fundamentais pois fazem com que determinado elemento/estilo seja reutilizável, eliminando assim a necessidade de reescrever classes ao longo do projeto quando nos deparamos com áreas e elementos que possuem um estilo previamente utilizado. A pergunta é: e quando for preciso alterar o estilo de um elemento específico? E, a resposta é: utilizamos modificadores!

A Metodologia BEM preconiza que se for preciso criar um modificador, o mesmo deve escrito com sintaxe usando dois hífens ( — ) após o nome do elemento ou bloco a ser modificado.

Observe a seguir as sintaxes para classes modificadoras:

  .block--modifier { }
  .block__element--modifier { } 

Bacana, não? Mas deve-se tomar cuidado, pois não é legal que se criem inúmeras classes ou que ocorram muitas repetições – a não ser que seja de extrema necessidade. Um jeito bacana de falarmos sobre isso é com o exemplo a seguir, considerando o bloco do HEADER mostrado na figura anterior.

  .header__navigation { }
  .header__navigation--secondary { }

Supondo que a navegação (navigation) secundária vá possuir os mesmos aspectos da anterior, fazendo apenas alterações pontuais, o natural é que você duplique os atributos, mas podemos fazer melhor usando um pré-processador. Utilizando SASS pode-se fazer um @extend da classe, assim, todas as propriedades são herdadas e se altera só o que for necessário.

Observe:

.header__navigation {
  background: #008cba;
  padding: 1rem 0;
  margin: 2rem 0;
  text-transform: uppercase;
}

.header__navigation--secondary {
 @extend .header__navigation;
 background: #dfe0e0;
}

Alguns podem pensar que o nome das classes fica muito grande. Na Metodologia BEM, os nomes das classes devem ser específicos, claros, fáceis de ler e, principalmente, descritivos.

Uma vantagem da Metodologia BEM é o uso de uma única classe por elemento no código, evitando que hajam ambiguidades de classes: ➨ "header header-change center".

Como vimos, a Metodologia BEM foi criada para auxiliar na escrita de código mais inteligente, além de oferecer um enorme suporte para definir e projetar uma hierarquia para o desenvolvimento front-end como o conhecemos.

É possível que você ou sua empresa criem sua própria maneira de utilizar a metodologia, mas é importante que seus princípios sejam mantidos para que suas reais utilidades sejam consumidas com eficiência. A metodologia BEM é realmente envolvente e ainda há muito a se explorar.

E lembrem-se: Pense duas vezes e codifique uma!

Nota final

A versão original deste tutorial foi editada pelo Maujor® com a devida permissão do autor.

Compartilhe essa matéria com seus amigos