Conhecendo a metodologia BEM

 

BEM é uma metodologia CSS (ou convenção de nomenclatura) usada no mundo todo. Continue lendo para saber o que é CSS BEM, vantagens em se usar, melhores práticas com BEM, exemplos de escrita e muito mais.

c
BEM é uma metodologia CSS (ou convenção de nomenclatura) usada no mundo todo. Continue lendo para saber o que é CSS BEM, vantagens em se usar, melhores práticas com BEM, exemplos de escrita e muito mais.

O que é BEM?

Pessoas do mundo todo tentam chegar a melhores práticas para se trabalhar com desenvolvimento web. Afinal, todos querem conseguir resultados melhores com esforços menores, certo?

O pessoal do Yandex, o buscador russo de maior relevância, conseguiu chegar a um padrão de nomenclatura notável, conseguindo aliar simplicidade e facilidade com muitas vantagens de implementação.

Seu nome é BEM.

E aí vem o primeiro segredinho: BEM, na verdade, é um acrônimo para Bloco, Elemento e Modificador. Esses são os 3 pilares do padrão BEM, tendo cada um seu significado, sua função e regras próprias de escrita.

Segundo Varya Stepanova, uma das desenvolvedoras front-end que já fez parte do time BEM da própria Yandex,

BEM faz alusão a Programação Orientada a Objetos (POO), uma maneira de descrever a realidade no código, com uma variedade de padrões e uma maneira de pensar nas entidades do programa.

E, realmente, é possível perceber esta alusão a POO no uso de BEM para nomear “entidades” no CSS. Com a prática e tempo de uso esse princípio vai ficando mais evidente.

Regras de Bloco, Elemento e Modificador

Como citado, cada uma das letrinhas do acrônimo BEM tem sua função específica dentro da metodologia, ora sendo usada em separado, ora em coordenação com as demais.

E são justamente essas regras de escrita e respectivas funções de Bloco, Elemento e Modificador que serão explicadas agora.

Bloco

Em BEM, um Bloco é uma entidade independente, um “bloco de construção” de uma aplicação; uma abstração mais geral, com seu próprio significado.

Se você está acostumado com outras convenções/metodologias (como SMACSS), para facilitar, pode considerar um Bloco como um Componente ou Módulo.

Bloco é a parte da trinca com mais flexibilidade na nomenclatura, significando que você pode atribuir o nome à “entidade” da maneira que quiser — inclusive em conjunto com outras convenções, como Namespaces CSS.

Elemento

Um Elemento faz parte de um Bloco; é um elemento-filho. Um Elemento não tem função/significado independente e está semanticamente vinculado ao seu respectivo Bloco.

Elementos têm uma regra específica de escrita, sendo uma classe CSS composta de Nome do Bloco + 2 underlines + nome do Elemento: .[Bloco]__[Elemento].

Por exemplo, se você tem um Bloco .c-menu, um Elemento dele pode ser .c-menu__item ou .c-menu__link.

Dentro das regras de escrita de BEM, esses 2 underlines representam um Elemento. Perceba que isso não viola as regras de nomenclatura de CSS, ao mesmo tempo em que deixa claríssimo do quê se trata, pois é de conhecimento geral (entre devs front end) que __ é um Elemento de BEM.

Modificador

omo sugere o próprio nome, um Modificador de BEM serve para… Modificar. Mas modificar o quê? Pode ser um Bloco ou um Elemento.

Isso mesmo: um Modificador pode ser aplicado tanto em um Bloco, quanto em um Elemento, servindo como uma variante usada para alterar sua aparência, variar uma propriedade ou atribuir um estado.

Sua regra de escrita é uma classe composta pelo nome de um Bloco ou Modificador + 2 hífens + o nome do Modificador: [Bloco|Elemento]--[Modificador].

Seguindo o exemplo, poderia haver um modificador para o menu .c-menu--dark para um versão escura; uma versão do menu fixa com .c-menu--fixed ou; para links desabilitados, .c-menu__link--disabled.

Exemplo prático de BEM

Agora que as razões de ser de Bloco, Elemento e Modificador foram explicadas e suas convenções de escrita apresentadas, convém um exemplo mais integral para fixar.

Seguindo o mesmo exemplo de um menu, poderia se ter o seguinte código HTML:

 <div class="c-menu__item">

    <a href="#" class="c-menu__link">Item</a>

  </div>

 

  <div class="c-menu__item">

    <a href="#" class="c-menu__link c-menu__link--disabled">Outro item</a>

  </div>

 

  <div class="c-menu__item">c

    <a href="#" class="c-menu__link">E mais um</a>

  </div>

</ul>

Então, ao se deparar com o HTM acima, já é possível desconfiar que o CSS terá a estrutura parecida com:

 

.c-menu {}

 

.c-menu__item {}

 

.c-menu__link {}

 

.c-menu__link--disabled {}