Convenções de nomes CSS: BEM, OOCSS, SMACSS comparados

Nomear classes CSS pode parecer trivial, mas em grandes bases de código torna-se uma das decisões arquiteturais mais importantes. Uma boa convenção de nomes previne guerras de especificidade, reduz colisões de nomes e torna as folhas de estilo autodocumentadas.

Por que a nomenclatura CSS importa

CSS tem um namespace global. Todo nome de classe está disponível em qualquer lugar, e as regras de especificidade determinam quais estilos vencem. Sem uma convenção de nomes, equipes inevitavelmente criam conflitos: dois desenvolvedores nomeiam suas classes como .card, e um sobrescreve o outro.

BEM (Block Element Modifier)

BEM é a convenção de nomes CSS mais amplamente adotada. Usa um padrão estruturado:

.block {}
.block__element {}
.block--modifier {}

/* Exemplo */
.card {}
.card__title {}
.card__image {}
.card--featured {}
.card__title--large {}

Regras do BEM

• Bloco: Um componente independente. Nomeado em kebab-case: .search-form, .nav-bar.
• Elemento: Uma parte do bloco sem significado independente. Separador de duplo underscore: .search-form__input.
• Modificador: Uma variante ou estado de um bloco/elemento. Separador de duplo hífen: .search-form--dark.

Benefícios do BEM

• Autodocumentado: .card__title--highlighted diz exatamente o que é
• Baixa especificidade: tudo é um seletor de classe simples
• Sem colisões de nomes: o nome do bloco delimita tudo
• Agnóstico de framework: funciona com qualquer stack tecnológico

OOCSS (CSS Orientado a Objetos)

OOCSS separa estrutura de aparência e contêiner de conteúdo:

/* Estrutura */
.media { display: flex; align-items: start; }
.media__body { flex: 1; }

/* Aparência */
.theme-dark { background: #333; color: #fff; }
.theme-light { background: #fff; color: #333; }

OOCSS cria objetos utilitários altamente reutilizáveis, mas pode resultar em muitas classes em um único elemento HTML.

SMACSS (Arquitetura Escalável e Modular)

SMACSS categoriza regras CSS em cinco tipos com prefixos:

Categoria	Prefixo	Exemplo
Base	nenhum	html, body, h1
Layout	l-	.l-sidebar
Módulo	nenhum	.card
Estado	is-	.is-active
Tema	t-	.t-dark

CSS Modules e CSS-in-JS

Frameworks modernos como React oferecem alternativas que resolvem colisões de nomes no nível de ferramentas:

• CSS Modules: Delimita automaticamente os nomes de classe. Você escreve .title, a ferramenta de build produz .Card_title_x7kd2. Use camelCase para nomes de classe, pois eles se tornam propriedades JavaScript.
• Tailwind CSS: Usa classes utilitárias, eliminando completamente a nomenclatura personalizada.
• styled-components / Emotion: CSS-in-JS com nomes de classe autogerados.

Qual você deve escolher?

Abordagem	Melhor para
BEM	CSS tradicional, equipes multi-desenvolvedores, temas CMS
CSS Modules	Projetos baseados em componentes React/Vue/Svelte
Tailwind	Prototipagem rápida, fluxos de trabalho utility-first
SMACSS	Grandes bases de código legado que precisam de organização

Converta seus nomes de classe

Classes CSS sempre usam kebab-case. Converta de outros formatos com nosso conversor kebab-case. Se precisar de camelCase para CSS Modules, experimente o conversor camelCase ou o hub de conversão de case.