A metodologia BEM para criação de códigos legíveis
Metodologia BEM para criar código legível
Crédito: essa matéria é uma colaboração de Lucas G. Santos.
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 (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:
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:
À 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__slogan { }
.header__searchbar { }
.header__menu { }
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:
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.
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.