BEM: Nomenclatura de Bloco, Elemento e Modificador
Aplique a metodologia Block-Element-Modifier para criar nomes de classes previsíveis e reutilizáveis.
BEM: Nomenclatura de Bloco, Elemento e Modificador é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é BEM?
BEM (Bloco–Elemento–Modificador) é uma convenção de nomenclatura que cria nomes de classes autoexplicativos. Ela torna os componentes CSS previsíveis e autodocumentados.
Bloco
Um Bloco é um componente de interface independente e significativo que pode existir por conta própria. Ele é a classe raiz do componente.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Elemento
Um Elemento é filho de um bloco e não tem significado fora dele. Os elementos usam dois sublinhados: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modificador
Um Modificador é uma variação ou um estado de um bloco ou elemento. Os modificadores usam dois hífens: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Exemplo completo de BEM
Um componente de cartão com nomenclatura BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>Estrutura CSS do BEM
CSS correspondente ao cartão BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Vantagem do BEM em termos de especificidade
As classes BEM são todas classes únicas (especificidade 0,1,0). Nenhum seletor é mais específico que outro, portanto substituí-los é simples — basta adicionar a classe modificadora correta.
Erros comuns no BEM
Evite estas armadilhas do BEM:
- Elementos em vários níveis:
.card__body__title— simplifique para.card__title - Elementos fora do bloco ao qual pertencem no HTML
- Uso de seletores de elementos como
.nav__link a— adiciona especificidade desnecessária
BEM com propriedades personalizadas do CSS
BEM e variáveis CSS combinam naturalmente. Defina tokens no nível do bloco para que os modificadores os substituam:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Quando não usar BEM
BEM é verboso e não é ideal para classes utilitárias ou estilos pontuais. Estruturas de prioridade às utilidades, como Tailwind, substituem completamente o BEM. Use BEM em bibliotecas personalizadas de componentes nas quais a nomenclatura semântica é importante.
BEM na prática
Muitos sistemas visuais usam variantes do BEM ou esquemas de nomenclatura semelhantes. A sintaxe específica importa menos que o princípio consistente: bloco → elemento → modificador, sem aninhamento profundo e com especificidade uniforme.
Verificação rápida
No BEM, qual sintaxe representa um elemento chamado "title" dentro de um bloco "card"?
Recapitulação
BEM usa a nomenclatura Bloco, Elemento e Modificador: .block__element--modifier. Todas as classes são classes únicas, garantindo especificidade uniforme e equivalente. Os elementos (__) pertencem ao bloco. Os modificadores (--) criam variantes. Evite aninhamentos profundos como .card__body__title — simplifique para .card__title.
Perguntas Frequentes
A aula “BEM: Nomenclatura de Bloco, Elemento e Modificador” é grátis?
Sim — o texto completo de “BEM: Nomenclatura de Bloco, Elemento e Modificador” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “BEM: Nomenclatura de Bloco, Elemento e Modificador”?
Aplique a metodologia Block-Element-Modifier para criar nomes de classes previsíveis e reutilizáveis. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “BEM: Nomenclatura de Bloco, Elemento e Modificador”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por Que a Arquitetura CSS é Importante
- BEM: Nomenclatura de Bloco, Elemento e Modificador
- Organização de Arquivos: ITCSS e Padrão 7-1
- Evitando Conflitos de Especificidade