BEM é tudo de bom

Uma metodologia fácil e efetiva para estruturar o seu CSS

Featured image

BEM (ou Block-Element-Modifier) é um padrão extremamente útil para escrever CSS que é fácil de ler, entender e escalar.

Exemplo de escrita CSS usando BEM
Exemplo de escrita CSS usando BEM

Por que eu deveria usar BEM?

Os principais benefícios quando trabalhamos com BEM são:

Afinal, como funciona a BEM?

Um nome de classe BEM é dividida em três partes:

[block]__[element]--[modifier]

Block

O bloco é o componente em si, o elemento pai mais externo. Podemos dizer que essa classe contém os estilos mais genéricos e reusáveis.

Exemplo de block

Element

Os elementos são subdivisões do bloco, filhos do elemento pai, que adicionam novas funcionalidades ao componente.

Exemplo de element

Modifier

O modificador é uma variação de estilo, que pode ser adicionado a um bloco ou a um elemento.

Exemplo de modifier

Na prática

Um bloco sem elementos ou modificadores

Componentes simples podem usar somente um único elemento e, portanto, uma única classe, que é o bloco.

<style>
  .card { }
</style>

<div class="card"></div>

Um componente com um modificador simples

Como visto na teoria, um componente pode ter uma variação. A variação deve ser implementada com uma classe modificadora.

Nota: Não use a classe modificadora sozinha!

A ideia da classe modificadora é incrementar, e não substituir a classe do bloco.

👍 BOM

<style>
  .card {
    display: block;
    background-color: gray;
  }

  .card--light {
    background-color: white;
  }
</style>

<div class="card card--light"></div>

👎 RUIM

<style>
  .card--light {
    display: block;
    background-color: white;
  }
</style>

<div class="card--light"></div>

Um componente com elementos

Estruturas mais complexas terão elementos filhos. Cada elemento filho que precisa de estilo deve ter uma classe.

Uma das propostas da BEM é manter a especificidade baixa e consistente.

👍 BOM

<style>
  .card { }
  .card__title { }
  .card__description { }
</style>

<div class="card">
  <h1 class="card__title"></h1>
  <p class="card__description"></p>
</div>

👎 RUIM

<style>
  .card { }
  .card h1 { }
  .card p { }
</style>

<div class="card">
  <h1></p>
  <p></p>
</div>

Se a estrutura tiver elementos filhos com vários níveis de profundidade, não tente representar cada nível no nome da classe.

Não é a intenção da BEM comunicar o nível de profundidade. Um nome de classe BEM, que representa um elemento filho do componente, deve incluir somente o nome do bloco e o nome do elemento.

👍 BOM

<style>
  .card { }
  .card__title { }
  .card__description { }
  .card__excerpt { }
  .card__button { }
</style>

<div class="card">
  <h1 class="card__title"></h1>
  <div class="card__description">
    <p class="card__excerpt"></p>
    <button class="card__button"></button>
  </div>
</div>

👎 RUIM

<style>
  .card { }
  .card__title { }
  .card__description { }
  .card__description__excerpt { }
  .card__description__button { }
</style>

<div class="card">
  <h1 class="card__title"></h1>
  <div class="card__description">
    <p class="card__description__excerpt"></p>
    <button class="card__description__button"></button>
  </div>
</div>

Elemento com modificador

Em alguns casos, você deve precisar trocar o estilo de um único elemento dentro do componente. Nesses casos, o modificador deve ser adicionado ao elemento, ao invés do bloco.

<style>
  .card { }
  .card__title { }
  .card__title--big { } /* alteração incremental de estilo */
  .card__description { }
  .card__excerpt { }
  .card__button { }
</style>

<div class="card">
  <h1 class="card__title card__title--big"></h1>
</div>

Estilizar elementos com base no modificador do bloco

Se você está fazendo a mesma modificação para vários elementos de um componente, considere adicionar um modificador para o bloco e ajustar os estilos de cada elemento.

👍 BOM

<style>
  .card--dark .card__title { }
  .card--dark .card__description { }
</style>

<div class="card card--dark">
  <h1 class="card__title"></h1>
  <p class="card__description"></p>
</div>

👎 RUIM

<style>
  .card__title--dark { }
  .card__description--dark { }
</style>

<div class="card">
  <h1 class="card__title card__title--dark"></h1>
  <p class="card__description card__description--dark"></p>
</div>

Nomes de componentes com mais de uma palavra

Na BEM, o uso de __ (underscore duplo) e -- (traço duplo) é justamente para que possamos usar - (traço simples) como separador de palavras.

Os nomes das classes devem ser fáceis de ler, logo, abreviações não são bem-vindas, a menos que sejam algo universalmente reconhecível.

👍 BOM

<style>
  .progress-bar { }
</style>

<div class="progress-bar"></div>

👎 RUIM

<style>
  .pbar { }
</style>

<div class="pbar"></div>

Conclusão

Hoje trabalho remotamente para um estúdio norte-americano chamado Feral, localizado em São Francisco, CA.

Nos muitos projetos em que trabalhamos, utilizamos a forma de escrita BEM, com algumas poucas variações.

Sem dúvida foi nossa melhor escolha para os tipos de projeto que desenvolvemos, facilitando no desenvolvimento e manutenção por todo o time.

E você? Qual metodologia de escrita CSS mais usa ou gosta?


Escrevi este artigo como uma adaptação livre desse artigo muito bem escrito pelo Mikel, portanto o crédito da explicação direta e exemplos vão para ele 😌.