Pular para o conteúdo
Aback Tools Logo

Ofuscador de nomes de classes CSS

Encurte nomes de classes CSS para nomes de um ou dois caracteres e ofusque suas folhas de estilo. Cole seu CSS e o HTML correspondente, veja uma tabela de renomeação com prévias antes/depois tanto para CSS quanto para HTML, e copie o código transformado - tudo grátis e privado, sem cadastro.

CSS Class Name Obfuscator

Paste your CSS and HTML below. All CSS class names will be shortened to the shortest possible single/double-character names. A rename mapping table shows every original name, its replacement, and total characters saved.

CSSCSS Input
HTMLHTML Input
Detected 13 unique class names·531 chars saved

Rename Mapping (13 classes)

Total saved: 531 chars
#OriginalShortOccurrencesChars Saved
1.btn.a11−22
2.btn-primary.b4−40
3.btn-secondary.c3−36
4.card.d13−39
5.card-body.e3−24
6.card-footer.f3−30
7.card-header.g3−30
8.footer.h9−45
9.footer-link.i4−40
10.header.j14−70
11.header-nav.k7−63
12.header-nav-item.l5−70
13.header-title.m2−22

CSSObfuscated CSS

.j { background: #1a1a2e; color: #fff; padding: 1rem; }
.m { font-size: 1.5rem; font-weight: 700; }
.k { display: flex; gap: 1rem; }
.l { cursor: pointer; padding: 0.5rem 1rem; border-radius: 4px; }
.l:hover { background: rgba(255,255,255,0.1); }
.d { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
.g { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.e { line-height: 1.6; color: #475569; }
.f { border-top: 1px solid #e2e8f0; padding-top: 1rem; margin-top: 1rem; }
.a { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; cursor: pointer; border: none; }
.b { background: #3b82f6; color: #fff; }
.b:hover { background: #2563eb; }
.c { background: #e2e8f0; color: #1e293b; }
.c:hover { background: #cbd5e1; }
.h { text-align: center; padding: 2rem; color: #94a3b8; font-size: 0.875rem; }
.i { color: #3b82f6; text-decoration: none; }
.i:hover { text-decoration: underline; }

HTMLObfuscated HTML

<div class="j">
  <div class="m">My App</div>
  <nav class="k">
    <span class="l">Home</span>
    <span class="l">About</span>
    <span class="l">Contact</span>
  </nav>
</div>

<div class="d">
  <div class="g">Welcome</div>
  <div class="e">
    This is a sample card component. The CSS classes on this page will be
    shortened to single or double-character names for obfuscation.
  </div>
  <div class="f">
    <button class="a b">Get Started</button>
    <button class="a c">Learn More</button>
  </div>
</div>

<div class="d">
  <div class="g">Features</div>
  <div class="e">CSS class name obfuscation helps protect your styling structure from casual inspection.</div>
  <div class="f">
    <button class="a b">View Details</button>
  </div>
</div>

<div class="h">
  <span>&copy; 2026 My App &mdash; </span>
  <a class="i" href="/privacy">Privacy</a>
  <a class="i" href="/terms">Terms</a>
</div>

Privacy Guarantee

All processing runs entirely in your browser. Your CSS, HTML, and the generated mappings never leave your device — no uploads, no API calls, no tracking.

Recursos

  • Entrada dupla (CSS + HTML): cole tanto sua folha de estilo quanto sua marcação HTML. A ferramenta cruza as duas para garantir que todo nome de classe usado no HTML tenha uma renomeação correspondente, e as classes no CSS que não são referenciadas também são encurtadas.
  • Nomes o mais curtos possível: os nomes de classes são encurtados para os menores nomes de um caractere (a-z, A-Z, _) e depois para nomes de dois caracteres (aa, ab etc.), mantendo sua saída o mais compacta possível.
  • Tabela completa de renomeação: uma tabela com código de cores mostra cada nome de classe original, seu substituto curto, o número de ocorrências e o total de caracteres economizados. Copie o mapa como JSON para seu pipeline de build.
  • Prévias antes/depois ao vivo: veja o CSS ofuscado e o HTML ofuscado se atualizarem em tempo real enquanto você edita a entrada. Copie o código transformado de qualquer uma das saídas com um clique.

O que é ofuscação de nomes de classes CSS?

A ofuscação de nomes de classes CSS substitui nomes de classes descritivos e legíveis das suas folhas de estilo e marcação por nomes curtos e sem significado. Por exemplo, .header-nav-item pode virar .a, .card-body pode virar .b, e assim por diante. A ferramenta gera automaticamente os nomes mais curtos possíveis e aplica o mapa de forma consistente no seu CSS e no seu HTML.

Como funciona o encurtamento de nomes de classes

A ferramenta extrai todos os nomes de classes únicos dos seus seletores CSS e dos seus atributos class no HTML. Em seguida, gera um mapa de renomeação usando os nomes mais curtos disponíveis - primeiro caracteres simples (de a a z, de A a Z e sublinhado), depois caracteres duplos (aa, ab, ..., _z) e assim por diante. Cada nome original é substituído de forma consistente nos dois arquivos para que seus estilos continuem sendo aplicados corretamente após a ofuscação.

Benefícios de redução de tamanho

Além da ofuscação, encurtar nomes de classes proporciona economia real de banda. Uma classe no estilo BEM como .product-card__title--featured (31 caracteres) reduzida a .a (1 caractere) economiza 30 caracteres por ocorrência. Com dezenas de classes aparecendo centenas de vezes em uma folha de estilo grande, a economia acumulada pode chegar a milhares de caracteres tanto no CSS quanto no HTML.

Limitações e considerações

A ofuscação de nomes de classes CSS funciona melhor quando você controla tanto a folha de estilo quanto a marcação. Se você usa nomes de classes dinâmicos gerados por JavaScript (por exemplo, concatenação de strings ou template literals), a ferramenta não consegue rastrear essas referências e elas serão deixadas como estão. Da mesma forma, nomes de classes usados em bibliotecas de terceiros ou inline em arquivos JavaScript fora das entradas de CSS/HTML não serão renomeados. A ferramenta exclui pseudoclasses CSS (:hover), pseudoelementos (::before) e regras at (@media) para que continuem funcionando.

Perguntas frequentes

A ofuscação de nomes de classes CSS substitui nomes descritivos e semânticos (como .header-nav-item ou .product-card__price) por nomes curtos e sem significado (como .a, .b, .c). Isso dificulta que concorrentes, scrapers e ferramentas automatizadas entendam a estrutura da sua página a partir do HTML e do CSS. Também reduz o tamanho dos arquivos, já que nomes longos são substituídos por equivalentes de um ou dois caracteres.

Sim, mas com ressalvas. O Tailwind gera classes utilitárias como .flex, .text-center e .bg-blue-500 aplicadas diretamente no HTML. Esta ferramenta detecta e renomeia qualquer nome de classe encontrado tanto no CSS quanto no HTML. Porém, se você usa a diretiva @apply do Tailwind ou CSS personalizado que referencia classes utilitárias, essas referências também serão renomeadas de forma consistente. A ferramenta é independente de framework - ela simplesmente encontra nomes de classes nos seus seletores CSS e atributos HTML.

Sim, desde que você processe o CSS e o HTML juntos. A ferramenta aplica o mesmo mapa de renomeação aos dois arquivos, então .card-body no seu CSS vira .b da mesma forma que class="card-body" no HTML vira class="b". Cada ocorrência de cada nome de classe é substituída de forma consistente. As únicas exceções são nomes de classes referenciados dinamicamente em JavaScript (por exemplo, por concatenação de strings), que esta ferramenta não consegue detectar.

A ferramenta gera os nomes únicos mais curtos possíveis usando uma estratégia de alocação específica: primeiro todos os caracteres simples (a-z, A-Z, sublinhado - 53 nomes), depois todas as combinações de dois caracteres (aa, ab, ..., _z - 2.809 nomes) e, por fim, combinações de três caracteres se necessário. Isso cobre até ~790.000 nomes de classes únicos, muito mais do que qualquer folha de estilo real conteria. A ordem é determinística: o primeiro nome de classe em ordem alfabética sempre recebe «a», o segundo recebe «b», e assim por diante.

Sim. A tabela de renomeação mostra cada correspondência de original para curto, e você pode copiar o mapa completo como JSON pelo botão de copiar. Esse JSON pode ser integrado ao seu pipeline de build - por exemplo, com um plugin PostCSS ou um loader personalizado de webpack - para que os nomes de classes sejam ofuscados automaticamente durante o build de produção.

A ferramenta trabalha com CSS bruto e texto HTML/JSX. Para CSS-in-JS (styled-components, Emotion etc.), cole o conteúdo do template literal CSS diretamente na entrada de CSS. Para CSS Modules, cole o CSS de origem e o JSX que usa os nomes de classes do módulo. Depois você pode readaptar o CSS/HTML de saída ao framework que preferir. O mapa de renomeação é especialmente útil para a configuração de CSS Modules.

Com certeza. O ofuscador de nomes de classes CSS roda 100 % no seu navegador. Seu CSS, seu HTML e os mapas gerados nunca saem do seu dispositivo. Não há análises, chamadas de API, processamento no servidor nem armazenamento de dados de qualquer tipo. Sua privacidade está completamente protegida.

Sim - 100 % grátis, sem cadastro, sem conta e sem limites de uso. Ofusque quantas folhas de estilo precisar, com quantos nomes de classes quiser, quantas vezes quiser. Sem níveis premium, sem cobranças ocultas e sem limites de taxa - grátis para sempre.