CSS: Convenção de Nomenclatura BEM CSS
1. O que é BEM?
BEM significa Block, Element, Modifier — uma convenção de nomenclatura que torna classes CSS autoexplicativas e livres de conflitos.
(1) Estrutura
CSS
.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { }
▶ Exemplo
HTML
<style>
.card { }
.card__title { font-size: 18px; }
.card__content { padding: 15px; }
.card--highlighted { border: 2px solid gold; }
</style>
<div class="card card--highlighted">
<h3 class="card__title">Título</h3>
<div class="card__content">Conteúdo</div>
</div>
2. Por que BEM?
| Benefício | Descrição |
|---|---|
| Auto-documentado | Nomes de classe explicam o que estilizam |
| Sem conflitos | Nomes únicos previnem colisões de estilo |
| Sem guerras de especificidade | Seletores planos, sem necessidade de aninhamento |
| Manutenção fácil | Mude uma classe sem afetar outras |
❓ Perguntas Frequentes
P Nomes de classe BEM são muito longos — o que fazer?
R Nomes longos são a troca de design do BEM — melhor nomes longos que conflitos de estilo. Você pode usar nomes mais curtos (como
card-t em vez de card__title), mas mantenha consistente no projeto. Aninhamento Sass pode reduzir repetição significativamente.P
-- e __ podem ser misturados no BEM?R Sim.
block__element--modifier é padrão, significando "um elemento de um bloco em um estado específico." Por exemplo, card__title--highlight significa "título do card em estado destacado." Não inverta a ordem como block--modifier__element — ordem importa.P BEM é adequado para projetos pequenos?
R Para projetos pequenos com apenas algumas páginas, BEM é exagero. Nomes de classe simples (
.title, .btn) são suficientes. Mas quando projetos excedem 10 páginas ou têm múltiplos desenvolvedores, o valor do BEM se torna claro.📖 Resumo
- BEM é uma das melhores convenções de nomenclatura CSS
- Através da estrutura Block, Element, Modifier, classes CSS se tornam autoexplicativas, livres de conflitos e sustentáveis
- BEM não requer seletores aninhados — cada classe é independente, evitando guerras de especificidade
- Qualquer convenção que escolha, consistência da equipe é mais importante
📝 Exercícios
- Crie um componente de "comentário do usuário" usando nomenclatura BEM: avatar, nome de usuário, hora, texto do comentário, botão de curtir.
- Reescreva este CSS em estilo BEM:
CSS
.profile { ... }
.profile .photo { ... }
.profile .info { ... }
.profile .info .name { ... }
.profile .actions .btn { ... }
- Considere introduzir nomenclatura BEM em seu projeto — pratique com um pequeno módulo em uma página.
