Padrão BEM CSS: como criar componentes CSS reutilizáveis usando Block Element Modifier

Se você está buscando entender o que é BEM CSS e como aplicar o padrão BEM para organizar, modularizar e evitar conflitos no seu CSS, este artigo traz conceitos, exemplos práticos e as melhores práticas para criar componentes CSS reutilizáveis.

Vamos responder à intenção mais comum sobre o tema: como utilizar a nomenclatura BEM (Block Element Modifier) para garantir uma arquitetura CSS escalável e consistente. 

Mais um dia típico na rotina de desenvolvimento: ao chegar ao trabalho, encontramos no mural de tarefas a solicitação de criação de uma nova funcionalidade. 

Nesta tela, temos diversas coisas: o menu, o logo, a busca… Mas o nosso foco é a área de informação do usuário logado. 

Nosso objetivo ao criar essa área é garantir que ela contenha: 

• A foto 
• O nome do usuário 
• A label informando o nível de acesso no sistema 

Mas como podemos fazer isso? 

O que é o padrão BEM CSS: separando blocos, elementos e modificadores  

O primeiro passo é entender como separar os elementos HTML que irão compor essa estrutura. Para isso, pode-se fazer um esboço do layout em uma ferramenta digital ou mesmo no papel. 

Agora, com tudo separado, fica mais claro que precisamos de pelo menos três tags: 

• `<img loading="lazy">` para o avatar; 
• `<h2>` para o nome; 
• Para a label, com o intuito de padronizar, as pessoas responsáveis pelo design optaram por criar um SVG para cada uma, então aqui teremos outra tag `<img loading="lazy">`. 

Para facilitar o agrupamento desses elementos, adicionaremos uma tag <div> que engloba todos eles. 

<div class="infousuario"> 
  <img loading="lazy" class="avatar" src="https://placehold.it/200x200" alt="" /> 
  <h2 class="nome"> 
Nome do Usuário 
  </h2> 
  <img loading="lazy" 
class="label" 
    src="https://cursos.alura.com.br/images/gnarus/profile/label-Moderador.svg" 
alt="" 
  /> 
</div>

Agora que sabemos as tags, onde vamos estilizar isso tudo? 

Como organizar seu CSS: da bagunça à arquitetura BEM  

Com o HTML pronto, precisamos estilizar os elementos. Para isso, vamos abrir o arquivo principal de CSS, o main.css: 

"Opa, acho que o arquivo main.css, que controla todo o nosso css, está meio cheio/bagunçado :(" 

Boas práticas para organização e modularização do CSS 

Para evitar que nossa funcionalidade fique perdida nesse meio, vamos fazer nosso estilo em um lugar mais limpo, criando um novo arquivo chamado infousuario.css e nele adicionar todos os estilos que precisamos. 

Observe que, nesse arquivo, adicionamos apenas classes para estilizar esta parte da página. 

Como nossas tags html já foram criadas com classes baseadas no que cada elemento seria, fica mais fácil de estilizar no CSS só chamando a classe usando o ponto (.) antes do seu nome. 

Como evitar conflitos de CSS com nomenclatura adequada 

Embora tenha ficado fácil estilizar, quando salvamos o código e testamos o novo pedaço da interface no ambiente de desenvolvimento, ele apresenta um conflito visual com algo que já havia sido implementado. 

"Imagine se tivesse ido assim pra produção =O" 

Ambos os elementos são fotos com a class avatar e possuem tags <img loading="lazy">, como podemos diferenciar cada uma delas? 

"Ah, podemos usar aninhamento de seletores, oras!" 

.infousuario .avatar { 
   /\* propriedades  
   do avatar filho de .infousuario \*/  
} 
.header .avatar {  
  /\* propriedades do  
  avatar filho de .header \*/ 
}

Boa! nesse caso, resolvemos o problema e nossa página volta ao normal: 

No entanto, ainda existe o risco de alguém criar um estilo sem utilizar aninhamento e, assim, acabar afetando negativamente o layout. 

/\* arquivo_qualquer.css \*/ 
.avatar { /\* Destruindo o  
  layout novamente muwahahahaha \*/ }

Por que a nomenclatura BEM ajuda na organização e escalabilidade do CSS 

Bom, primeiro de tudo o que queremos fazer? 

"Criar a nova funcionalidade sem quebrar o site T.T" 

Até agora, criamos um arquivo infousuario.css e nele estávamos colocando nosso CSS, até aí tudo bem:  

Entretanto, o real problema começou a se manifestar quando tivemos que nos preocupar em saber se um estilo já foi criado ou não. 

Baseado no nosso problema, vamos pensar o seguinte: 

Se eu criar um novo arquivo infousuario.css, o que acontece com o anterior? 

"Ele some, uai" 

Em situações normais, antes de sobrescrever ou deletar o arquivo, normalmente recebemos um alerta do computador ou do editor de texto utilizado (como o VsCode)." 

Momento análise 

Como podemos representar o conjunto de HTML e CSS responsável por gerar a parte visual do infousuario? 

"Ahh, ele é um pedaço dela!" 

Isso! Nosso arquivo infousuario.css junto com o trecho HTML referem a um pedaço do site, algumas pessoas chamam de bloco outras de componente. 

No geral, esse bloco é responsável por agrupar vários elementos relacionados à visualização das informações do usuário. Com isso em mente, todos os elementos internos devem ser estilizados com base nesse bloco. Por exemplo: 

.infousuario .avatar { 
}

Mas veja que do jeito que está, ainda temos o risco dos aninhamentos que sobrescrevem coisas! 

Como aplicar o padrão BEM CSS: exemplos práticos de Block Element Modifier 

Para evitar problemas de sobrescrita de estilos, podemos adotar um padrão de nomenclatura de seletores bastante utilizado pela comunidade front-end, chamado BEM: 

.infoUsuario__avatar { 
}

Nesse cenário temos uma classe ao invés do aninhamento, os dois underlines podem até soar estranho de início, mas o BEM estabelece por meio deles uma relação de elemento pai e elemento filho sem aninhamento. Sendo o pai um bloco e o filho um element (be que vem do BEM). 

Do jeito que fizemos aqui já estamos evitando conflitos de CSS com uma classe .avatar que estiver solta pelo código :) 

Refatorando para um CSS modular e reutilizável com BEM 

Com essa nova estratégia o nosso infousuario.css fica da seguinte maneira: 

Agora nosso CSS não está mais conflitando! \o/ 

"Mas, e se eu quiser reaproveitar algum estilo?" 

Boa pergunta! Um cara perfeito para analisarmos o reaproveitamento é o nosso avatar. 

.infosUsuario__avatar { 
  margin-top: 20px; 
  border: 9px solid #8db7d2; 
  border-radius: 50%; 
}

Quando definimos o border-radius como 50%, estamos deixando o avatar sendo um circulo por padrão, mas caso quisermos que ele seja assim apenas em determinados casos, podemos dizer que, ser circular é uma modificação deste elemento dentro do blocoinfoUsuario. 

Para criar o seletor dele nós escrevemos as classes com dois hífens, .avatar--circular utilizando assim o M do BEM (modifier) que serve para representar a modificação de um elemento (como, por exemplo, deixar o avatar circular ou marcar um item de menu como ativo). Isso deixaria nosso CSS assim: 

.infosUsuario__avatar { 
  margin-top: 20px; 
  border: 9px solid #8db7d2; 
} 
.infosUsuario__avatar--circular { 
  /\*os dois hifens,  
  indicam que estamos  
  modificando algum estilo do elemento \*/ 
border-radius: 50%; 
}

Como criar componentes CSS reutilizáveis e escaláveis com o padrão BEM 

Agora nosso avatar tem seus estilos bem definidos e fica mais fácil trabalhar com ele, mas o avatar circular é utilizado em diversos pontos no site da alura: infosUsuario, header, forum… 

O que fazer para evitar reescrever o border-radius em todos os lugares em que o avatar aparece? 

"Podemos criar um componente avatar!" 

Exatamente! Um ponto importante é lembrar que o fato de o avatar ser circular ou ter uma borda azul são modificações em relação ao estado padrão. Seguindo essa linha, temos o seguinte resultado: 

/\*avatar.css\*/  
.avatar--circular { 
  border-radius: 50%; 
} 
.avatar--bordaAzul { 
  border: 9px solid #8db7d2; 
}

Agora, a única propriedade CSS que precisamos alterar em `infousuario.css` é o margin-top: 

/\* infousuario.css \*/ 
.infosUsuario { 
text-align: center; 
} 
.infosUsuario__avatar { 
margin-top: 20px; /\* Essa margem não conflita em lugar nenhum \*/ 
} 
.infosUsuario__nome { 
color: #747c81; 
margin: 0; 
margin-top: 20px; 
} 
.infosUsuario__label { 
margin-top: 15px; 
transition: .3s; 
}

Com isso, nosso componente está pronto! Além disso, agora é possível adicionar novas funcionalidades aos projetos de forma reutilizável e sem conflitos de CSS. 

• Observação importante (2026): Embora o BEM continue sendo uma metodologia válida e amplamente utilizada, em 2026 existem alternativas modernas como CSS Modules, CSS-in-JS (styled-components, Emotion), utility-first frameworks (Tailwind CSS) e a nova feature nativa do CSS @scope que também resolve problemas de isolamento de estilos. A escolha entre BEM e essas alternativas depende do contexto do projeto, stack tecnológico e preferências da equipe. 

Caso queira se aprofundar no BEM, deixo o link da documentação para vocês conferirem, espero que o artigo ajude vocês em seus projetos e não deixem de compartilhar o que vocês fizerem :) 

Ahh, e caso queira ir um pouco mais a fundo no assunto organização de CSS conhecendo outras formas além do BEM, deixo este ótimo post do @marcobrunobr. 

Como aprender mais sobre o tema

Se você quer aprender mais sobre CSS, HTML, Javascript e outras tecnologias que fazem parte da web, aqui na Alura temos uma Carreira Front-End React, uma jornada estruturada, com desafios reais, conteúdos práticos e tudo que o mercado espera de uma pessoa desenvolvedora Front-End! 

Sintam-se a vontade para comentar, dar críticas ou sugestões!