BEM e convenções de nomenclatura CSS, com gerador de classes | We.Inc
Como o BEM nomeia blocos, elementos e modificadores, com um gerador que verifica os nomes das suas classes. Compare o BEM com classes utilitárias, CSS Modules e @scope.
BEM e convenções de nomenclatura CSS
BEM significa Block, Element, Modifier (bloco, elemento, modificador). Um bloco é um componente independente, como .card; um elemento é uma parte que só faz sentido dentro dele, escrita .card__title com dois underlines; e um modificador é uma variação escrita .card--featured com dois hifens. Os modificadores são adicionados ao lado da classe base, nunca no lugar dela.
O BEM em uma tabela
Parte
Padrão
Exemplo
Bloco
.search-form
Elemento
block__element
.search-form__input
Modificador de bloco
block--modifier
.search-form--compact
Modificador de elemento
block__element--modifier
.search-form__button--disabled
Modificador de chave e valor
block--key-value
.search-form--theme-dark
É na nomenclatura que projetos CSS continuam organizados ou viram aos poucos uma pilha de sobrescritas. Esta página explica as regras do BEM segundo o site oficial do BEM, verifica os nomes das suas classes enquanto você digita e compara o BEM com as outras formas que as equipes usam hoje para evitar conflitos de estilos.
Digite no gerador um nome de bloco e, se quiser, um elemento e um modificador.
Leia os nomes de classe gerados e o HTML que os usa. Avisos aparecem quando um nome quebra uma regra do BEM.
Copie o esqueleto de HTML e CSS para o seu componente.
Selecione só com a classe única. .card .card__title adiciona a especificidade que o BEM foi feito para evitar.
Nunca encadeie elementos como .card__body__title. Todo elemento pertence diretamente ao bloco, não importa a profundidade no HTML.
Mantenha a classe base ao lado de um modificador: class="btn btn--large", e não class="btn--large" sozinho.
Dê nomes pelo que as coisas são, não pela aparência. .alert--error sobrevive a um redesign; .alert--red não.
Escolha uma convenção por projeto e documente. Uma mistura de estilos é mais difícil de ler que qualquer um deles sozinho.
Perguntas frequentes
O que significa BEM?
Block, Element, Modifier (bloco, elemento, modificador). É um método de nomenclatura de classes CSS que mantém cada seletor com uma única classe, assim a especificidade fica plana e dá para saber pelo nome da classe a qual componente ela pertence.
Por que o BEM usa underlines duplos e hifens duplos?
Hifens simples já são usados dentro dos nomes, como em search-form. Duplicar os separadores deixa inequívoco o limite entre bloco, elemento e modificador, então .search-form__submit-button é lido como um bloco e um elemento.
Ainda vale a pena usar BEM com Tailwind ou CSS Modules?
Com classes utilitárias você raramente escreve nomes de classe de componentes, então o BEM importa menos. Com CSS Modules a ferramenta de build isola os nomes para você, e a recomendação é usar nomes curtos em camelCase. O BEM continua sendo uma ótima escolha para CSS puro, Sass, temas de WordPress e design systems compartilhados entre frameworks.
Como nomeio um elemento dentro de outro elemento?
Ligue-o ao bloco, não ao elemento pai. Um título dentro do corpo de um card é .card__title, mesmo quando o HTML o coloca dentro de .card__body. Se a parte aninhada puder ser reutilizada sozinha, transforme-a em um novo bloco.
O problema que as convenções de nomenclatura resolvem
Toda classe CSS vive em um único namespace global. Dois desenvolvedores escrevendo .title em arquivos diferentes vão acabar estilizando os títulos um do outro, e a correção habitual, um seletor mais longo, começa uma corrida armamentista de especificidade.
Uma convenção dá um dono a cada classe. Quando .pricing-card__price se comporta mal, você sabe qual componente abrir, e pode apagar o componente sabendo que as classes dele não são usadas em outro lugar.
Quando blocos contêm blocos
Um bloco pode ficar dentro de outro bloco. Um botão dentro de um card continua sendo .btn e, se o card precisar posicioná-lo, o mesmo elemento pode ter as duas classes: class="btn card__action".
Essa mistura mantém os estilos do próprio botão reutilizáveis, enquanto o card controla só o layout, como margem ou alinhamento, pela classe de elemento dele.
O escopo nativo do CSS está chegando lá
@scope permite limitar regras a uma subárvore, por exemplo tudo dentro de .card, mas não dentro de um .card__media aninhado. Ele chegou ao Baseline como recém-disponível em 2026, então confira os navegadores do seu público antes de depender só dele.
As cascade layers resolvem um problema parecido: elas permitem ordenar grupos inteiros de estilos, para que um reset ou um tema de terceiros nunca fique acima dos seus componentes, por mais específicos que sejam os seletores deles.
BEM comparado a outras abordagens
Formas de evitar conflitos entre nomes de classe
Abordagem
Exemplo
Quem garante nomes únicos
Melhor uso
BEM
.card__title--large
Você, por convenção
CSS puro, Sass, temas de CMS
Classes utilitárias (Tailwind)
text-lg font-semibold
Não precisa de nomes de componente
Apps feitos de componentes
CSS Modules
styles.cardTitle
A ferramenta de build reescreve os nomes
React, Vue e similares com bundler
@scope
@scope (.card) { h2 {} }
O navegador limita as regras
Navegadores mais novos, marcação enxuta
Um componente BEM completo
Bloco card com elementos e modificadores
Cada seletor é uma classe. O modificador featured muda a borda e permite que um elemento reaja por meio do modificador do bloco.
Erros comuns no BEM
Errado e certo
Errado
Certo
Por quê
.card__body__title
.card__title
Elementos pertencem ao bloco, não a outros elementos
class="card--featured"
class="card card--featured"
Um modificador precisa da classe base
.card .card__title
.card__title
Aninhamento extra aumenta a especificidade
div.card__title
.card__title
Seletores BEM usam só nomes de classe
.card--blue
.card--primary
Nomeie o significado, não a cor
Gerador de nomes de classe BEM
Digite um bloco, um elemento e um modificador para obter nomes de classe, com o HTML e o CSS correspondentes e avisos quando um nome quebra uma regra.
Bloco
Elemento (opcional)
Modificador (opcional)
Bloco
Elemento
Modificador
{label}: não inclua __ ou -- você mesmo; o gerador adiciona os separadores.
{label}: use letras latinas minúsculas, dígitos e hifens simples.