Metodologia Bem css

Fala Mariana, tudo bem?

Mostrando diretamente isso em um código simples, imagine a seguinte situação: construir um newsfeed.

Basicamente, se trata de uma lista (ordenada ou não) com alguns elementos dentro de cada item. Embora listas sejam um exemplo saturado para usar, elas cabem muito bem na explicação de como utilizar a metodologia.

poderíamos utilizar também uma estrutura composta por várias <div> e apenas ajustar o CSS, porém isso não é uma boa prática — não segue os web standards e, em consequência, o SEO da sua página ficará horrível.

Construindo o nosso newsfeed utilizando o padrão BEM, a estrutura ficaria mais ou menos assim:

<ul class="list">
  <li class="list__item">
    <h2 class="list__title">My publication</h2>
    <p class="list__author>Julio Lozovei</p>
    <p class="list__text">A publication using BEM :)</p>
  </li>
</ul>

No exemplo acima, temos um bloco e alguns elementos. Onde:

• .list é um bloco;
• .list__item, .list__title, .list__author e .list__text são elementos;

Para contemplar os modificadores no exemplo, imagine que algumas publicações terão um certo destaque em relação as outras. Dessa forma, nossa estrutura ficaria assim:

<ul class="list">
  <li class="list__item list__item--highlight">
    <h2 class="list__title">My publication</h2>
    <p class="list__author>Julio Lozovei</p>

    <p class="list__text">A publication using BEM.</p>
  </li>
</ul>

Ou seja, explicando agora o padrão da nomenclatura que utilizamos:

• Nossa primeira classe sempre será o bloco: .list
• Para criarmos os elementos, utilizamos 2 underlines ( __ ) após o nome do nosso bloco: .list__item, .list__title
• Para criarmos os modificadores, utilizamos 2 traços ( — ) no nosso bloco ou elemento: .list__item--highlight, .list__author--active

Como saber o que é um elemento e o que é um modificador?

Um elemento sempre será uma parte, um complemento da estrutura do bloco. Seguindo nossos exemplos acima, um item de uma lista, o título de uma publicação.

Os modificadores são estados que os nossos blocos ou elementos poderão ter: um botão com diferentes aparências, uma situação de destaque. Geralmente, os modificadores fazem com que algumas propriedades dos blocos/elementos sejam complementadas — background-color, font-weight, borders, opacity, ou até mesmo o display e o position.

É importante lembrar também que um elemento não pode estar dentro de outro. Por exemplo:

<ul class="list">
  <li class="list__item">
    <h2 class="list__item__title">My publication</h2>
  </li>
</ul>

Quando nos deparamos com essa situação, devemos utilizar a seguinte estrutura:

<ul class="list">
  <li class="list__item">
    <h2 class="list__title">My publication</h2>
  </li>
</ul>

E eis aqui o porque disso:

Um bloco é uma entidade independente, um componente de uma aplicação. Um bloco pode ser simples ou composto — contendo outros blocos. É uma questão de contexto: .list é o nosso bloco composto (compound block), que possui outro bloco composto, .list__item. E .list__title é apenas um bloco, contido dentro de .list__item.

Também, podemos utilizar o esquema de 2 classes:

<ul class="list">
  <li class="list__item publication">
    <h2 class="publication__title">My publication</h2>
  </li>
</ul>

É uma solução que funciona muito bem pois podemos "pendurar" os elementos dentro de um bloco novo. Porém essa abordagem deve ser utilizada com certa moderação para não saturar seu elemento com diversas classes.

Não é uma regra, mas é uma boa prática utilizar o padrão __ apenas 1x dentro do nome da sua classe (apenas 1 elemento). Se você está chegando em nomenclaturas com mais de um elemento, é bom rever a estrutura utilizada!