Convenção de Nomenclatura BEM CSS
O que é BEM?
BEM significa Block, Element, Modifier — uma convenção de nomenclatura que torna classes CSS autoexplicativas e livres de conflitos.
Estrutura
.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>
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
Q 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.
Q `--` 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.
Q 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.