Promova um elemento BEM quando ele tiver um propósito coerente e puder ser responsável pela própria implementação fora do bloco pai. Use o exercício local para Mac abaixo para testar esse limite antes de renomear classes ou mover CSS.

O que torna um elemento independente?

Para quem mantém uma página HTML criada manualmente, a questão prática é se uma seção que está crescendo deve continuar fazendo parte do pai ou se tornar um bloco mantido separadamente. O BEM define um bloco como um componente lógica e funcionalmente independente; um elemento pertence a um bloco e não pode ser usado de forma independente dele. Blocos podem conter outros blocos. Conceitos-chave

Considere uma página sintética que contém um bloco workbench. Seu workbench__preview contém uma forma abstrata, um rótulo e uma legenda. Inicialmente, os três servem apenas à bancada de trabalho. Mais tarde, a mesma prévia passa a ser necessária em uma região estreita de shelf. Esse segundo posicionamento oferece uma tarefa concreta de extração: determine se a prévia pode se tornar um bloco shape-tile, com aparência e estrutura interna próprias.

A profundidade, por si só, não decide isso. O BEM permite elementos aninhados no DOM, mantendo os nomes simples: workbench__preview, workbench__label e workbench__caption. Um nome como workbench__preview__caption expressa incorretamente que um elemento pertence a outro elemento. O início rápido oficial também reconhece um bloco de serviço como opção quando um elemento complexo precisa de partes internas organizadas de forma independente. Início rápido

É útil distinguir entre mover a marcação para um modelo separado por legibilidade e estabelecer um novo bloco BEM. Você pode fazer a primeira alteração sem se comprometer imediatamente com a segunda. Torne explícito o limite do bloco quando puder descrever o que a parte extraída controla, o que o elemento hospedeiro fornece e como outro posicionamento a utilizará.

Use um teste de dependências antes de extrair

O guia de decisão a seguir é um método editorial derivado do princípio de independência do BEM. Não é um sistema oficial de pontuação. Aplique-o a uma subárvore candidata, em vez de avaliar a página inteira de uma vez.

Pergunta Indícios favoráveis à extração Motivo para manter o elemento
Ele tem um propósito claro? “Exibe uma forma com um rótulo e uma legenda” Seu propósito é apenas “o contêiner interno da bancada de trabalho”
Ele pode controlar sua apresentação interna? Borda, espaçamento e tipografia são mantidos juntos Essas regras são inseparáveis da estrutura do pai
O elemento hospedeiro pode definir o posicionamento separadamente? O elemento hospedeiro controla o espaço disponível e os intervalos ao redor A candidata exige um layout específico de um ancestral
Suas variações descrevem a si próprias? Um bloco compacto faz sentido em vários posicionamentos Cada variação recebe o nome de um pai específico
A manutenção separada ajudaria agora? Existe um segundo posicionamento ou uma responsabilidade interna substancial A extração criaria uma interface sem uso atual

Escreva uma frase antes de alterar o código: “O shape-tile controla sua forma, rótulo, legenda e espaçamento interno; o elemento hospedeiro controla o posicionamento e a largura disponível.” Se essa frase continuar se expandindo para incluir a disposição em colunas da bancada de trabalho ou a ordem dos elementos irmãos, reconsidere onde deve ficar o limite.

Separe o layout externo da aparência interna. As diretrizes de CSS do BEM atribuem a geometria externa e o posicionamento ao pai e demonstram a combinação da classe de um bloco independente com a classe de um elemento pai no mesmo nó. Essa combinação é chamada de mix. Metodologia CSS

Por exemplo, class="shape-tile workbench__preview" pode expressar as duas identidades. Deixe shape-tile definir a borda e o layout interno, e workbench__preview definir seu posicionamento. Evite atribuir a mesma propriedade às duas identidades, a menos que a sobrescrita faça parte intencional do contrato.

Faça uma comparação local no Mac

Crie uma nova pasta para este exercício, para poder comparar o design extraído sem alterar uma página existente. Você precisa de um editor de texto simples e de um navegador para desktop; o exemplo não exige instalação de pacotes, JavaScript, fontes baixadas nem arquivos de imagem.

No TextEdit, escolha Arquivo > Novo e depois Formato > Converter em Texto Simples. Cole o HTML abaixo e salve-o como index.html, escolhendo Usar .html se solicitado. A Apple documenta essas etapas e também explica como reabrir o HTML como código-fonte usando Ignorar comandos de texto formatado. Trabalhe com documentos HTML no TextEdit no Mac

Crie o documento HTML completo

Este documento posiciona o mesmo componente proposto em dois elementos hospedeiros. Todos os rótulos são sintéticos, e a forma abstrata é desenhada com CSS. Salve o conteúdo a seguir como index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Adicione a folha de estilos completa

Crie outro arquivo de texto simples chamado styles.css na mesma pasta. Confira se o nome real do arquivo é styles.css, e não styles.css.txt. Cole a folha de estilos completa:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Abra index.html no Safari ou em outro navegador para desktop. A comparação esperada mostra uma bancada de trabalho mais larga e uma prateleira mais estreita. Os blocos compartilham os estilos do componente; o espaço disponível determina se a forma e o texto cabem lado a lado ou se quebram em linhas.

O contrato de recursos importa aqui: rel="stylesheet" estabelece um recurso de folha de estilos externa, e href="styles.css" identifica o arquivo necessário para este documento. Adicionar uma classe BEM não estabelece esse vínculo com o recurso. Mantenha os dois arquivos juntos ao mover o exercício. O padrão HTML define essa relação entre folhas de estilos. Padrão HTML: tipo de link “stylesheet”

Como saber se a extração funcionou?

Use a comparação como exercício de diagnóstico. Os resultados esperados abaixo decorrem do código fornecido; são verificações a fazer no navegador, não resultados de testes realizados nele.

  1. Verifique o estado inicial. Os dois blocos devem ter fundo branco, uma forma azul arredondada, um rótulo e uma legenda. Se tudo parecer sem estilo, confira o nome do arquivo da folha de estilos e o link antes de avaliar o limite do componente.
  2. Remova uma classe de posicionamento. Exclua workbench__preview do primeiro bloco, salve e recarregue. A margem superior deve mudar, enquanto a aparência interna permanece intacta.
  3. Remova uma classe do elemento hospedeiro. Remova temporariamente workbench da seção que o contém. O quadro do elemento hospedeiro e a largura fixa devem desaparecer; o bloco deve manter os estilos do componente.
  4. Altere o componente compartilhado. Altere o raio da borda em .shape-tile. As duas instâncias devem mudar sem editar os seletores dos elementos hospedeiros.
  5. Teste com conteúdo extenso. Substitua uma legenda por uma frase sintética mais longa e estreite a janela do navegador. Confira a quebra de linha e se todo o texto continua visível.

Interprete as falhas de acordo com as responsabilidades. Uma borda ausente após remover a classe do elemento hospedeiro significa que um estilo do componente talvez ainda esteja no seletor do elemento hospedeiro. Espaçamento ao redor inesperado aponta para regras de posicionamento. Diferenças no texto podem revelar estilos herdados ou seletores globais. Corrija a dependência responsável antes de adicionar outra sobrescrita.

A nomenclatura BEM não cria isolamento de estilos imposto pelo navegador. A herança de CSS continua pela árvore do documento: quando a cascata não fornece um valor para o elemento, propriedades herdadas recebem valores do pai. Isso é definido na especificação CSS Cascading and Inheritance e ilustrado pelo MDN. CSS Cascading and Inheritance Module Level 5, seção 7.2, Herança

O exemplo define intencionalmente a fonte e a cor do texto na raiz do bloco. Em uma página real, pode ser desejável herdar a tipografia do site. Registre isso como uma dependência. Independência significa que o ambiente necessário é compreensível e portável; não significa que todo padrão do navegador precise ser reproduzido dentro de cada componente.

Quando manter o elemento?

Mantenha a candidata como elemento quando seu significado e implementação continuarem específicos do pai. Um contêiner de alinhamento usado apenas na bancada de trabalho pode ter muitos descendentes sem precisar de uma identidade pública separada. Simplifique os nomes BEM e melhore a organização antes de introduzir um novo bloco.

Por outro lado, um componente usado apenas uma vez ainda pode merecer ser extraído quando sua responsabilidade interna for substancial e seu limite de dependências estiver claro. Considere a reutilização um indício favorável, não uma quantidade obrigatória. Neste exercício, o segundo posicionamento facilita a inspeção do limite; ele não estabelece uma regra universal de duas utilizações.

Reconsidere também uma extração que acumule variações específicas do elemento hospedeiro. Nomes como shape-tile--inside-workbench sugerem que o posicionamento está se tornando parte da interface do componente. Primeiro, pergunte se a diferença pertence a workbench__preview. Reserve uma variação do componente para uma diferença que você consiga explicar nos próprios termos do componente.

O escopo de CSS moderno muda a decisão?

A regra @scope pode restringir onde os seletores delimitados correspondem, o que pode ajudar a gerenciar seletores dentro de uma subárvore do documento. Atualmente, o MDN classifica essa regra como Baseline 2026, disponível nas versões atuais dos navegadores desde março de 2026, e observa que dispositivos ou navegadores mais antigos podem não ter suporte. Não presuma que todas as instalações do Mac sejam compatíveis. Regra CSS @scope

O exercício fornecido usa seletores de classe comuns e não exige @scope. Mantenha os estilos essenciais do componente nessas regras ao oferecer suporte a navegadores sem escopo. O escopo pode melhorar a forma como você expressa um limite, mas a decisão sobre a responsabilidade ainda exige uma descrição clara do propósito, das dependências e do posicionamento do componente.

Extraia o elemento complexo quando puder mover seu propósito e implementação interna juntos, deixar o layout ao redor com o elemento hospedeiro e demonstrar o resultado em outro contexto. Se essas responsabilidades continuarem entrelaçadas, mantenha o elemento enquanto esclarece os limites; um nome de classe mais curto, por si só, não conclui a refatoração.

Fontes