Pular para o conteúdo principal

Uso do BEM CSS em Projetos

O BEM (Block, Element, Modifier) é uma metodologia de nomenclatura que ajuda a criar interfaces mais escaláveis e modulares. Seguir o BEM pode significar uma manutenção mais fácil e um código CSS mais organizado. Abaixo, você encontrará uma explicação detalhada e exemplos de como aplicá-lo em seus projetos.

Por que usar BEM?​

  • Manutenção facilitada: Com nomes de classes mais claros, fica mais fácil entender o relacionamento entre o HTML e o CSS.
  • Reuso de código: Facilita o reuso de componentes sem dependência de contextos específicos.
  • Escalabilidade: A nomenclatura clara ajuda novos desenvolvedores a entenderem o código rapidamente.

Estrutura BEM​

  • Block: Componente independente que pode ser reutilizado.
  • Element: Parte do bloco que não tem significado sozinha.
  • Modifier: Variação ou extensão de um bloco ou elemento.

Exemplo Prático​

Considere uma lista de itens com um item destacado. Usando BEM, o código HTML e CSS poderia ser organizado da seguinte forma:

HTML​

<ul class="list">
  <li class="list__item">Item 1</li>
  <li class="list__item list__item--highlighted">Item 2</li>
  <li class="list__item">Item 3</li>
</ul>

CSS​

.list {
  padding: 20px;
  list-style: none;
}
.list__item {
  padding: 10px;
  background-color: #f0f0f0;
}
.list__item--highlighted {
  background-color: #ffc107;
}