Banner propaganda da DevMedia - Cursos de desenvolvimento web

Metodologia BEM para criar código legível

visualizações Publicado em: 05/07/2016 Quero ser um autor
foto do autor
Autor: Lucas G. Santos

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:

Exemplo Block - Metodologia BEM

Exemplo Block Composto - Metodologia BEM

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:

HTML

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

CSS

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

Exemplo Search Box - Metodologia BEM

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:

HTML

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

CSS

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

CSS

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

CSS

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

CSS

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

CSS

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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo