Padrão BEM: Como criar componentes CSS

O padrão BEM (Block, Element, Modifier) é uma metodologia de nomeação de classes CSS que foi criada com o objetivo de tornar o código mais legível e manutenível. Ele se baseia na ideia de dividir o código em três partes: blocos, elementos e modificadores.

Blocos são componentes independentes e reutilizáveis que representam uma área da página. Por exemplo, um cabeçalho, uma barra lateral ou um formulário de login podem ser considerados blocos.

Elementos são partes de um bloco que não têm significado por si só. Por exemplo, um título dentro de um cabeçalho, um link dentro de uma barra de navegação ou um botão dentro de um formulário.

Modificadores são classes que servem para modificar o estilo de um bloco ou elemento. Por exemplo, um modificador pode ser usado para mudar a cor de um botão ou para adicionar uma borda a um cabeçalho.

Para utilizar o padrão BEM, as classes devem ser nomeadas de acordo com o seguinte formato:

• Para blocos: .nome-do-bloco
• Para elementos: .nome-do-bloco__nome-do-elemento
• Para modificadores: .nome-do-bloco--nome-do-modificador ou .nome-do-bloco__nome-do-elemento--nome-do-modificador

Por exemplo, um código CSS para um botão dentro de um formulário poderia ser escrito da seguinte maneira:

.formulario__botao--vermelho {
  background-color: red;
}

Aqui estão alguns exemplos de como o padrão BEM pode ser usado em um código CSS:

Exemplo1:

.cabecalho {
  background-color: #333;
  color: #fff;
}

.cabecalho__titulo {
  font-size: 32px;
}

.cabecalho__menu {
  display: flex;
}

.cabecalho__menu-item {
  margin-right: 20px;
}

.cabecalho--escuro {
  background-color: #111;
}

Neste exemplo, temos um bloco chamado “cabecalho” que possui dois elementos: “titulo” e “menu”. O elemento “menu” possui um elemento filho chamado “menu-item”. Além disso, temos um modificador chamado “escuro” que muda a cor de fundo do cabeçalho.

Exemplo 2:

.formulario {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
}

.formulario__campo {
  margin-bottom: 10px;
}

.formulario__botao {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #333;
  color: #fff;
  font-size: 18px;
}

.formulario__botao--vermelho {
  background-color: red;
}

.formulario__botao--verde {
  background-color: green;
}

Neste exemplo, temos um bloco chamado “formulario” que possui dois elementos: “campo” e “botao”. O elemento “botao” possui dois modificadores: “vermelho” e “verde”, que alteram a cor do botão.

O uso do padrão BEM pode ajudar a tornar o código mais organizado e de fácil manutenção, pois permite identificar rapidamente qual parte da página cada classe está afetando. Além disso, ao usar palavras-chave relevantes no nome das classes, fica mais fácil para os mecanismos de busca entender o conteúdo do seu site, o que pode ajudar na otimização de SEO.

Em resumo, o padrão BEM é uma ferramenta útil para quem deseja criar componentes CSS

Espero que esses exemplos ajudem a entender como o padrão BEM funciona. Qualquer dúvida, estou à disposição! 🙂

Rafael Costa