6 min de leitura
BEM é tudo de bom
Uma metodologia fácil e efetiva para estruturar o seu CSS
BEM (ou Block-Element-Modifier) é um padrão extremamente útil para escrever CSS que é fácil de ler, entender e escalar.
Por que eu deveria usar BEM?
Os principais benefícios quando trabalhamos com BEM são:
- Auto-explicativo e fácil de assimilar
- Cria ume estrutura escalável
- Facilita a manutenção do código
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.
Element
Os elementos são subdivisões do bloco, filhos do elemento pai, que adicionam novas funcionalidades ao componente.
Modifier
O modificador é uma variação de estilo, que pode ser adicionado a um bloco ou a um elemento.
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 😌.
Comentários