Em projetos de médio e grande porte, os seletores CSS tendem a virar uma bagunça de escopo. A metodologia BEM (Block, Element, Modifier) resolve isso criando regras estritas de nomenclatura de classes.
1. A Anatomia do BEM
As classes são divididas em Blocos independentes, Elementos filhos que compõem o bloco (separados por __) e Modificadores de estado (separados por --).
/* Bloco */
.card { background: #fff; }
/* Elemento */
.card__title { font-size: 18px; }
/* Modificador */
.card__title--featured { color: #ff8d00; }
Por que usar?
O BEM elimina totalmente a especificidade excessiva e os conflitos em cascata, permitindo mover blocos HTML entre páginas sem quebrar a folha de estilos.