Metodologia BEM: bloco elemento modificador
Dê nomes às classes CSS seguindo o padrão Block__Element--Modifier para criar estilos de componentes autoexplicativos, reutilizáveis e com baixa especificidade.
Metodologia BEM: bloco elemento modificador é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é BEM
BEM (Bloco, Elemento, Modificador) é uma convenção de nomenclatura do CSS que torna os estilos previsíveis, reutilizáveis e livres de conflitos. Ao codificar a estrutura dos componentes nos nomes das classes, elimina conflitos de especificidade e colisões acidentais entre estilos.
Blocos — componentes independentes
Um Bloco é um componente independente e reutilizável: card, button, nav. O nome da classe é o nome do bloco, escrito em minúsculas e com hífens.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elementos — partes de um bloco
Um Elemento é uma parte de um Bloco que não tem significado por si só. Use dois sublinhados: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modificadores — variantes e estados
Um Modificador altera a aparência ou o comportamento de um Bloco ou Elemento. Use dois hífens: block--modifier ou block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Regras de CSS do BEM
As classes BEM têm especificidade baixa e igual (uma classe cada). Isso facilita a substituição dos estilos. Nunca use IDs ou seletores de elementos aninhados — eles aumentam a especificidade de forma imprevisível.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM com Sass
O seletor pai & do Sass torna a escrita de BEM menos repetitiva. O CSS compilado é idêntico ao BEM comum.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Quando criar um novo bloco
Crie um novo Bloco quando o componente puder funcionar sozinho e ser reutilizado em diferentes contextos. Crie um Elemento quando a parte só fizer sentido dentro de um Bloco específico.
BEM evita aninhamento
O BEM desencoraja aninhamentos profundos no HTML e no CSS. Um elemento dentro de outro elemento continua sendo block__element, não block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM e JavaScript
Use uma classe separada específica para JS como gancho de comportamento: prefixo js-. Isso desacopla a estilização dos scripts — renomear uma classe BEM não interromperá o comportamento do JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Combinação de blocos BEM
Um elemento pode ter várias classes de bloco para estilização específica ao contexto, sem acoplar os blocos.
<button class="btn btn--primary form__submit">Submit</button>Limitações do BEM
Os nomes das classes podem ficar longos. O BEM funciona melhor em equipes grandes e sistemas de projeto nos quais a consistência global dos estilos é importante. Em estruturas de componentes (React/Vue) com estilos com escopo, os benefícios de namespace do BEM são menos importantes.
Verificação rápida
No BEM, o que card__title--truncated representa?
Recapitulação: BEM
Bloco: componente independente. Elemento (dois sublinhados __): parte de um bloco. Modificador (dois hífens --): variante ou estado. Especificidade baixa e igual. Evite seletores de ID e aninhamentos profundos. Use o prefixo js- para ganchos do JavaScript. O Sass & torna o BEM menos repetitivo. Excelente para equipes grandes e sistemas de projeto.
Perguntas Frequentes
A aula “Metodologia BEM: bloco elemento modificador” é grátis?
Sim — o texto completo de “Metodologia BEM: bloco elemento 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Metodologia BEM: bloco elemento modificador”?
Dê nomes às classes CSS seguindo o padrão Block__Element--Modifier para criar estilos de componentes autoexplicativos, reutilizáveis e com baixa especificidade. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 1 de 4.
Quanto tempo leva a aula “Metodologia BEM: bloco elemento 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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Metodologia BEM: bloco elemento modificador
- Módulos CSS: nomes de classes com escopo
- CSS-in-JS: Styled-components e Emotion
- Tailwind CSS: abordagem utility-first