O que é BEM CSS: guia prático de nomeação

Você já abriu um arquivo CSS e encontrou .header .nav .link:hover { ... } encadeado em cinco níveis? Pois é exatamente esse pesadelo que o BEM CSS elimina. A convenção troca seletores aninhados por classes planas e autodescritivas, e este artigo mostra o que é BEM CSS na prática.

O que é BEM CSS: a resposta direta

BEM (Block, Element, Modifier) é uma convenção de nomenclatura para classes em HTML e CSS que organiza a interface em três unidades: bloco, elemento e modificador. A metodologia foi criada pela equipe de busca da Yandex e publicada por volta de 2009, e desde então se tornou uma das formas mais comuns de estruturar CSS em projetos de qualquer tamanho. Se você quer entender o que é BEM CSS na prática, a definição cabe em uma frase: cada nome de classe descreve o que o componente é, onde ele vive dentro do bloco e em que estado ele está.

O nome vem do acrônimo em inglês. Um bloco é um componente independente, como um card ou um botão. Um elemento é uma parte interna do bloco que não faz sentido fora dele, como o título de um card. Um modificador é uma variação de estilo ou estado, como um botão desativado.

A convenção não é um framework e não exige nenhuma ferramenta. Você escreve os nomes à mão, direto no HTML e no CSS, e o ganho aparece na leitura: ao ver .menu__item--ativo, qualquer pessoa entende a estrutura sem consultar outro arquivo.

Como funciona a sintaxe bloco__elemento--modificador

A sintaxe do BEM usa dois separadores com papéis distintos: dois underscores (__) ligam um elemento ao seu bloco, e dois hífens (--) marcam um modificador. Essa é a grafia canônica divulgada pela Yandex, embora algumas equipes adotem variantes como hífen único ou notação camelCase — o essencial é escolher um padrão e mantê-lo em todo o projeto.

Na prática, cada regra de BEM CSS segue uma das três formas abaixo:

.bloco — o componente raiz, por exemplo .card.
.bloco__elemento — uma parte do componente, por exemplo .card__titulo.
.bloco--modificador ou .bloco__elemento--modificador — uma variação, por exemplo .botao--desabilitado.

Dois princípios acompanham a sintaxe. Primeiro, seletores BEM nunca se aninham: você escreve .card__titulo e não .card .card__titulo, mantendo especificidade baixa e uniforme. Segundo, o bloco nunca estiliza a aparência do elemento a partir de fora; cada classe é autossuficiente, o que torna os componentes portáveis entre páginas.

Um exemplo completo de card em BEM

Nada explica BEM melhor do que um componente real. Abaixo, um card de artigo com título, texto e uma variação destacada, escritos em HTML e CSS puros:

### HTML do componente card

html O que é BEM CSS Convenção de nomenclatura para classes. Ler o guia

### CSS do componente card

css .card { background: #fff; border-radius: 8px; padding: 24px; }

.card--destaque { border: 2px solid #2563eb; }

.card__titulo { font-size: 1.25rem; margin: 0 0 8px; }

.card__texto { color: #555; }

.card__link { color: #2563eb; }

Repare em três detalhes. O modificador .card--destaque aparece ao lado do bloco no HTML, então ele só adiciona estilo sem repetir o CSS base. Cada elemento tem exatamente uma classe, sem hierarquia de seletores. E nada no CSS depende da ordem das tags: você pode reordenar o HTML sem quebrar nada.

BEM resolve o problema de especificidade?

Sim, e esse é o principal argumento técnico a favor da convenção. Seletores BEM têm sempre especificidade igual — uma única classe (0,1,0) — porque a regra é nunca aninhar seletores. Em CSS, especificidades são somadas por camada: um seletor como .header .nav .link:hover vale 0,4,0, e vencer um estilo desses depois exige um seletor ainda mais específico, criando a chamada "guerra de especificidade".

Com BEM CSS, todas as regras pesam o mesmo, então a ordem no arquivo passa a mandar — e a ordem você controla. Sobrescrever um estilo vira uma decisão explícita, não uma disputa de seletores. Para uma análise aprofundada da metodologia, o BEM 101 do CSS-Tricks, publicado em 2015, continua sendo a referência mais citada em inglês.

Existe um custo: os nomes ficam longos, e o HTML pode parecer verboso. Equipes grandes consideram esse um preço baixo por previsibilidade; em projetos de uma página só, o benefício é menor. Vale ponderar o tamanho e a vida útil do projeto antes de adotar.

Como nomear classes em BEM sem errar

Os erros de BEM quase sempre estão nos nomes, não na sintaxe. As regras práticas abaixo resolvem a maioria das dúvidas do dia a dia:

### As cinco regras que evitam 90% dos problemas

Nomeie pelo que é, não pelo que faz ou como parece. .card__rodape envelhece bem; .card__vermelho quebra na primeira troca de paleta.
Um elemento sempre pertence a um bloco. .titulo solto não existe em BEM; o mínimo é .card__titulo.
Não crie elemento de elemento. Não existe .bloco__elemento__sub; se a parte é complexa, ela provavelmente é um bloco novo.
Modificadores não substituem o bloco. Use class="botao botao--primario", nunca apenas class="botao--primario", senão o modificador herda estilos que não existem.
Mantenha um único padrão de separador. Escolha __ e -- canônicos ou outra variação, e documente a decisão no repositório.

Uma pergunta frequente é como nomear estados como hover. Em Bem CSS puro, estados visuais simples ficam na pseudo-classe (.card__link:hover); estados semânticos, como --ativo ou --desabilitado, entram como modificador, porque costumam ser controlados por JavaScript.

BEM, SMACSS e CSS Modules: qual escolher

BEM não é a única forma de domar o CSS, e a escolha depende do seu ambiente. A tabela abaixo compara as três abordagens mais comuns nos critérios que importam na decisão:

### Comparativo das convenções

Abordagem	O que é	Ferramenta necessária	Escopo garantido	Melhor uso
BEM	Convenção de nomes em bloco, elemento e modificador	Nenhuma	Não, depende de disciplina	Projetos em HTML/CSS puro e equipes mistas
SMACSS	Guia de arquitetura que categoriza regras em base, layout, módulo e estado	Nenhuma	Não, depende de disciplina	Projetos legados com muitas folhas de estilo
CSS Modules	Sistema que gera nomes únicos em tempo de build	Empacotador (Webpack, Vite)	Sim, automático	Aplicações em React, Vue ou similares

Resumindo a comparação: se o projeto roda sem build, BEM é a escolha natural. Se você já usa um bundler com CSS Modules, o escopo automático elimina parte da necessidade de convenção — embora muitas equipes combinem os dois. O SMACSS, documentado por Jonathan Snook em 2012, funciona mais como guia de organização de arquivos do que como padrão de nomes.

BEM ainda vale a pena em 2026?

Vale, desde que você entenda o que a convenção entrega e o que ela ignora. O que é BEM CSS hoje não mudou desde a criação: continua sendo um padrão de nomes, sem ferramenta associada. Em projetos com Tailwind, styled-components ou CSS Modules, parte do problema que BEM resolvia já é tratada pela ferramenta. O BEM ainda domina em e-mails em HTML, protótipos, sistemas sem build e bases grandes que precisam de padronização rápida sem migração de stack.

A referência oficial da metodologia permanece disponível em getbem.com, e a documentação original da Yandex detalha a filosofia completa. Se você está começando, aprender BEM antes de qualquer framework é um bom investimento: os conceitos de bloco, elemento e estado reaparecem em Componentes Web, em design systems e até na API de componentes do Vue e do React.

Se você chegou até aqui pesquisando como organizar melhor seu CSS, provavelmente também produz conteúdo técnico — talvez em vídeo. Uma aula gravada no YouTube, por exemplo, esconde exatamente o tipo de explicação passo a passo que este artigo formaliza em texto. Muitos criadores, como o Dev Doido do canal do youtube, transformam esse material em artigos para alcançar quem prefere ler.

É exatamente esse caminho que o Skala blog facilita: você cola a URL de um vídeo, a plataforma transcreve o conteúdo e gera um artigo estruturado, pronto para revisão. Se suas melhores explicações hoje vivem dentro de gravações, transformá-las em páginas escritas é a forma mais direta de dar a elas uma segunda vida — e quem quiser ir além pode conferir recursos complementares em sites como crazystack.com.br.

FAQ: perguntas frequentes sobre BEM CSS

O que significa a sigla BEM?

BEM vem de Block, Element, Modifier: bloco, elemento e modificador. São as três unidades que compõem todo nome de classe na convenção, separadas por __ entre bloco e elemento e por -- antes do modificador.

BEM é um framework ou exige instalação?

Não. BEM é apenas uma convenção de nomenclatura para classes, sem biblioteca, dependência ou etapa de build. Você adota escrevendo os nomes diretamente no HTML e no CSS do projeto.

Posso usar BEM com Tailwind ou CSS Modules?

Sim. Com Tailwind, algumas equipes usam BEM apenas para nomear componentes semânticos. Com CSS Modules, o escopo já é automático, então o BEM fica opcional e costuma aparecer só para manter nomes legíveis no HTML gerado.

Como nomear estados como hover e ativo em BEM?

Estados de pseudo-classe, como hover, ficam no CSS (.card__link:hover). Estados semânticos controlados por JavaScript entram como modificadores, por exemplo .menu__item--ativo.

Quem criou o BEM e quando?

A metodologia foi criada pela equipe de desenvolvimento da Yandex, empresa de busca russa, e documentada publicamente por volta de 2009. Desde então, tornou-se uma das convenções de nomenclatura mais adotadas no desenvolvimento front-end.

Source video