Validador BEM Naming

Convenção de nomenclatura BEM explicada

BEM significa Block, Element, Modifier (Bloco, Elemento, Modificador) — uma metodologia de CSS criada na Yandex. Ela produz nomes de classe previsíveis e autoexplicativos, que mantêm a especificidade do CSS plana e os componentes reutilizáveis. Validar um nome de classe significa compará-lo com o padrão bloco / elemento / modificador.

As três partes

• Block — um componente independente e significativo: card, site-search.
• Element — uma parte de um bloco, unida com underscore duplo __: card__title.
• Modifier — uma flag que muda aparência ou estado, unida com hífen duplo --: card--featured.

Eles se combinam no padrão completo block__element--modifier, por exemplo site-search__input--focused. Dentro de cada parte, as palavras são escritas em kebab-case.

Por que funciona

Como todo seletor é uma única classe, a especificidade permanece plana — sem seletores descendentes profundos, sem guerras de !important. O nome do bloco cria um namespace para seus elementos, então o mesmo componente pode ser colocado em qualquer lugar sem vazamento de estilo. O objetivo são componentes reutilizáveis com aninhamento zero.

Pegadinhas comuns

• Usar camelCase (btnPrimary) em vez de kebab-case (btn-primary).
• Usar um underscore ou hífen simples onde o BEM exige __ ou --.
• Encadear elementos como card__body__title — elementos BEM não aninham; use card__body-title.
• Capitalizar o bloco (Footer__copyright) — nomes de bloco são minúsculos.
• Misturar seletores como .button.is-active, que não é BEM (é um padrão de estado do SMACSS).

FAQ

Um elemento pode ter seus próprios elementos? Não — não existe block__el1__el2. Achate a estrutura: a parte mais profunda ainda pertence ao bloco.

card--featured é válido sozinho? Um modificador deve acompanhar o bloco que ele modifica (class="card card--featured"); aplicado sozinho, não há estilo base para alterar.

Por que underscore duplo e hífen duplo? A duplicação permite usar hifens simples livremente nas fronteiras de palavras do kebab-case, sem ambiguidade entre os separadores e as palavras.