Convenções de Nomenclatura: BEM, OOCSS, SMACSS

Descubra metodologias para nomear classes de forma consistente e escalável.

Quando você começa a escrever CSS, é fácil cair na armadilha de dar nomes aleatórios às suas classes. minha-div, botao-azul, texto-grande... parece inofensivo no início. Mas à medida que seu projeto cresce, essa falta de padrão se transforma em caos: classes duplicadas, estilos que se sobrescrevem de forma inesperada, dificuldade em entender o que cada classe faz e um pesadelo para manter.

É aí que entram as Convenções de Nomenclatura CSS. Elas são conjuntos de regras e diretrizes para nomear suas classes e IDs de forma consistente, lógica e previsível. O objetivo principal é tornar seu CSS mais:

  • Modular: Cada parte do seu CSS deve ser independente e reutilizável.
  • Escalável: Fácil de adicionar novas funcionalidades sem quebrar as existentes.
  • Manutenível: Simples de entender, modificar e depurar.
  • Colaborativo: Todos na equipe seguem o mesmo padrão, facilitando o trabalho em conjunto.

Vamos explorar três das metodologias mais populares: BEM, OOCSS e SMACSS.

1. BEM (Block, Element, Modifier)

BEM é uma metodologia de nomenclatura que ajuda a criar componentes de interface de usuário (UI) reutilizáveis e independentes. É talvez a mais popular e rigorosa das três.

  • Block (Bloco): Uma entidade independente e significativa. Pode ser um componente autônomo.

    • Exemplos: header, menu, button, card, form.
    • Nomenclatura: nome-do-bloco (minúsculas, hífens para separar palavras).

  • Element (Elemento): Uma parte de um bloco que não tem significado autônomo e está semanticamente ligada ao seu bloco.

    • Exemplos: menu__item, card__title, form__input.
    • Nomenclatura: nome-do-bloco__nome-do-elemento (dois underscores __).

  • Modifier (Modificador): Uma flag em um bloco ou elemento que representa uma mudança de estado, comportamento ou aparência.

    • Exemplos: button--primary, button--disabled, menu__item--active, card--featured.
    • Nomenclatura: nome-do-bloco--nome-do-modificador ou nome-do-bloco__nome-do-elemento--nome-do-modificador (dois hífens --).

Exemplo BEM:

<div class="card card--featured">
  <h2 class="card__title">Título do Card</h2>
  <p class="card__description">Descrição do card.</p>
  <button class="button button--primary">Comprar</button>
  <button class="button button--secondary button--disabled">Detalhes</button>
</div>

/* Bloco */
.card {
  border: 1px solid #ccc;
  padding: 20px;
}

/* Modificador de Bloco */
.card--featured {
  border-color: gold;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Elemento */
.card__title {
  font-size: 1.5em;
  color: #333;
}

/* Elemento */
.card__description {
  font-size: 1em;
  line-height: 1.5;
}

/* Bloco */
.button {
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

/* Modificador de Bloco */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modificador de Bloco */
.button--secondary {
  background-color: gray;
  color: white;
}

/* Modificador de Bloco */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Vantagens do BEM:

  • Clareza e previsibilidade: Você sabe exatamente o que cada classe faz e onde ela pertence.
  • Modularidade: Componentes são independentes e reutilizáveis.
  • Evita conflitos: Nomes longos e específicos reduzem a chance de sobrescrever estilos.

Desvantagens do BEM:

  • Nomes de classes podem ficar muito longos.
  • Pode parecer excessivo para projetos muito pequenos.

2. OOCSS (Object-Oriented CSS)

OOCSS foca em dois princípios principais:

  1. Separar Estrutura de Skin (Aparência):

    • Estrutura: Propriedades que definem o layout e o posicionamento (ex: width, height, margin, padding).
    • Skin: Propriedades que definem a aparência visual (ex: background-color, color, border, box-shadow).
    • Isso permite reutilizar a estrutura em diferentes contextos visuais.

  2. Separar Container de Conteúdo:

    • Evitar seletores aninhados que dependem da localização do elemento no HTML.
    • Ex: Em vez de .sidebar h2, use .sidebar-title ou .heading--sidebar. Isso torna o componente mais flexível para ser movido.

Exemplo OOCSS:

<div class="media">
  <img class="media__img" src="avatar.jpg" alt="Avatar">
  <div class="media__body">
    <h3 class="media__title">Nome do Usuário</h3>
    <p>Alguma descrição.</p>
  </div>
</div>

<button class="button button--primary">Comprar</button>
<button class="button button--secondary">Detalhes</button>

/* Objeto Media (Estrutura) */
.media {
  overflow: hidden; /* Clearfix */
  margin-bottom: 20px;
}

.media__img {
  float: left;
  margin-right: 10px;
}

.media__body {
  overflow: hidden; /* Ocupa o espaço restante */
}

/* Objeto Button (Estrutura e Skin) */
.button {
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 5px; /* Skin */
}

.button--primary {
  background-color: blue; /* Skin */
  color: white; /* Skin */
}

.button--secondary {
  background-color: gray; /* Skin */
  color: white; /* Skin */
}

Vantagens do OOCSS:

  • Reutilização de código: Reduz a duplicação de CSS.
  • Manutenção: Mudanças em um "objeto" não afetam outros.
  • Performance: Menos CSS para o navegador processar.

Desvantagens do OOCSS:

  • Pode levar a muitas classes no HTML.
  • A separação de estrutura e skin pode ser difícil de aplicar consistentemente.

3. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS é mais uma arquitetura do que uma convenção de nomenclatura estrita. Ele propõe categorizar as regras CSS em cinco tipos, o que ajuda a organizar os arquivos e a pensar sobre a responsabilidade de cada estilo.

  1. Base: Estilos padrão para tags HTML (reset, normalize, body, h1, p, a). Sem classes ou IDs.
  2. Layout: Estilos para a estrutura principal da página (header, footer, sidebar, grid). Geralmente prefixados com l- ou layout-.
    • Ex: .l-header, .l-sidebar.
  3. Module (Módulo): Componentes reutilizáveis e independentes (botões, cards, navegação, formulários).
    • Ex: .card, .button, .menu.
  4. State (Estado): Estilos que descrevem o estado de um módulo ou layout (escondido, ativo, desabilitado, expandido). Geralmente prefixados com is- ou is-active.
    • Ex: .is-hidden, .is-active, .is-collapsed.
  5. Theme (Tema): Estilos que sobrescrevem os módulos e layouts para criar diferentes temas visuais.

Exemplo SMACSS (foco na estrutura e prefixos):

<div class="l-container">
  <header class="l-header">
    <nav class="module-nav">
      <ul class="module-nav__list">
        <li class="module-nav__item is-active"><a href="#">Home</a></li>
        <li class="module-nav__item"><a href="#">Sobre</a></li>
      </ul>
    </nav>
  </header>
  <main class="l-main">
    <div class="module-card">
      <h2 class="module-card__title">Produto</h2>
      <button class="button is-primary">Comprar</button>
    </div>
  </main>
</div>

/* Base */
body { font-family: sans-serif; }
h1, h2 { margin-top: 0; }

/* Layout */
.l-container {
  max-width: 960px;
  margin: 0 auto;
}
.l-header {
  padding: 20px;
  background-color: #f0f0f0;
}
.l-main {
  padding: 20px;
}

/* Module */
.module-card {
  border: 1px solid #ccc;
  padding: 15px;
}
.module-card__title {
  font-size: 1.2em;
}
.button {
  padding: 8px 12px;
  border-radius: 3px;
}

/* State */
.is-active {
  font-weight: bold;
  color: blue;
}
.is-primary { /* Modificador de estado para o botão */
  background-color: green;
  color: white;
}

Vantagens do SMACSS:

  • Estrutura clara e organizada para arquivos e regras CSS.
  • Ajuda a pensar sobre a responsabilidade de cada regra.
  • Flexível o suficiente para ser combinado com BEM ou OOCSS.

Desvantagens do SMACSS:

  • Menos focado em regras de nomenclatura estritas (precisa de outras metodologias para isso).
  • A categorização pode ser subjetiva às vezes.

Qual escolher?

Não existe uma "melhor" metodologia universal. A escolha depende do tamanho do projeto, da equipe, das ferramentas e das preferências.

  • BEM: Ótimo para projetos grandes e complexos, onde a clareza e a modularidade dos componentes são cruciais. Excelente para equipes grandes.
  • OOCSS: Bom para reduzir a duplicação de código e criar estilos reutilizáveis.
  • SMACSS: Excelente para estruturar a arquitetura geral do seu CSS, especialmente em projetos maiores.

Muitas vezes, as equipes combinam elementos de diferentes metodologias (ex: SMACSS para a estrutura geral e BEM para a nomenclatura de módulos). O importante é escolher um padrão e segui-lo consistentemente.