Ofuscador de nombres de clases CSS
Acorta los nombres de clases CSS a nombres de uno o dos caracteres para ofuscar tus hojas de estilo. Pega tu CSS y el HTML correspondiente, obtén una tabla de renombrado con vistas previas antes/después tanto para CSS como para HTML, y copia el código transformado: todo gratis y privado, sin registro.
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.
Rename Mapping (13 classes)
| # | Original | Short | Occurrences | Chars Saved |
|---|---|---|---|---|
| 1 | .btn | .a | 11 | −22 |
| 2 | .btn-primary | .b | 4 | −40 |
| 3 | .btn-secondary | .c | 3 | −36 |
| 4 | .card | .d | 13 | −39 |
| 5 | .card-body | .e | 3 | −24 |
| 6 | .card-footer | .f | 3 | −30 |
| 7 | .card-header | .g | 3 | −30 |
| 8 | .footer | .h | 9 | −45 |
| 9 | .footer-link | .i | 4 | −40 |
| 10 | .header | .j | 14 | −70 |
| 11 | .header-nav | .k | 7 | −63 |
| 12 | .header-nav-item | .l | 5 | −70 |
| 13 | .header-title | .m | 2 | −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>© 2026 My App — </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.
Características
- Entrada doble (CSS + HTML): pega tanto tu hoja de estilos como tu marcado HTML. La herramienta cruza ambos para asegurar que cada nombre de clase usado en el HTML tenga su renombrado correspondiente, y las clases del CSS que no se referencian también se acortan.
- Nombres lo más cortos posible: los nombres de clase se acortan a los nombres más pequeños de un solo carácter (a-z, A-Z, _) y luego a nombres de dos caracteres (aa, ab, etc.), manteniendo tu salida lo más compacta posible.
- Tabla completa de renombrado: una tabla con código de colores muestra cada nombre de clase original, su reemplazo corto, el número de apariciones y el total de caracteres ahorrados. Copia el mapa como JSON para tu canal de compilación.
- Vistas previas antes/después en vivo: ve cómo se actualizan en tiempo real tanto el CSS ofuscado como el HTML ofuscado mientras editas la entrada. Copia el código transformado de cualquiera de las dos salidas con un clic.
¿Qué es la ofuscación de nombres de clases CSS?
La ofuscación de nombres de clases CSS sustituye los nombres descriptivos y legibles de tus hojas de estilo y tu marcado por nombres cortos y sin significado. Por ejemplo, .header-nav-item podría convertirse en .a, .card-body en .b, y así sucesivamente. La herramienta genera automáticamente los nombres más cortos posibles y aplica el mapa de forma coherente tanto en tu CSS como en tu HTML.
Cómo funciona el acortamiento de nombres de clase
La herramienta extrae todos los nombres de clase únicos tanto de tus selectores CSS como de tus atributos class de HTML. Después genera un mapa de renombrado usando los nombres más cortos disponibles: primero caracteres simples (de la a a la z, de la A a la Z y el guion bajo), luego caracteres dobles (aa, ab, ..., _z) y así sucesivamente. Cada nombre original se sustituye de forma coherente en ambos archivos para que tus estilos sigan aplicándose correctamente tras la ofuscación.
Beneficios de la reducción de tamaño
Además de la ofuscación, acortar los nombres de clase aporta un ahorro real de ancho de banda. Una clase estilo BEM como .product-card__title--featured (31 caracteres) que se reduce a .a (1 carácter) ahorra 30 caracteres por aparición. Con docenas de clases que aparecen cientos de veces en una hoja de estilos grande, el ahorro acumulado puede llegar a miles de caracteres tanto en el CSS como en el HTML.
Limitaciones y consideraciones
La ofuscación de nombres de clases CSS funciona mejor cuando controlas tanto la hoja de estilos como el marcado. Si usas nombres de clase dinámicos generados por JavaScript (por ejemplo, concatenación de cadenas o plantillas literales), la herramienta no puede rastrear esas referencias y se dejarán tal cual. Del mismo modo, los nombres de clase usados en bibliotecas de terceros o en línea en archivos JavaScript fuera de las entradas de CSS/HTML no se renombrarán. La herramienta excluye las pseudoclases CSS (:hover), los pseudoelementos (::before) y las reglas at (@media) para que sigan funcionando.
Preguntas frecuentes
La ofuscación de nombres de clases CSS sustituye nombres descriptivos y semánticos (como .header-nav-item o .product-card__price) por nombres cortos y sin significado (como .a, .b, .c). Esto dificulta que competidores, scrapers y herramientas automatizadas entiendan la estructura de tu página a partir del HTML y el CSS. También reduce el tamaño de los archivos, ya que los nombres largos se sustituyen por equivalentes de uno o dos caracteres.
Sí, pero con matices. Tailwind genera clases utilitarias como .flex, .text-center y .bg-blue-500 que se aplican directamente en el HTML. Esta herramienta detecta y renombra cualquier nombre de clase que encuentre tanto en tu CSS como en tu HTML. Sin embargo, si usas la directiva @apply de Tailwind o CSS personalizado que referencia clases utilitarias, esas referencias también se renombrarán de forma coherente. La herramienta es independiente del framework: simplemente encuentra nombres de clases en tus selectores CSS y atributos HTML.
Sí, siempre que proceses juntos tu CSS y tu HTML. La herramienta aplica el mismo mapa de renombrado a ambos archivos, así que .card-body en tu CSS se convierte en .b igual que class="card-body" en tu HTML se convierte en class="b". Cada aparición de cada nombre de clase se sustituye de forma coherente. Las únicas excepciones son los nombres de clase referenciados dinámicamente en JavaScript (por ejemplo, mediante concatenación de cadenas), que esta herramienta no puede detectar.
La herramienta genera los nombres únicos más cortos posibles mediante una estrategia de asignación concreta: primero todos los caracteres simples (a-z, A-Z, guion bajo: 53 nombres), después todas las combinaciones de dos caracteres (aa, ab, ..., _z: 2.809 nombres) y, por último, combinaciones de tres caracteres si hicieran falta. Esto cubre hasta ~790.000 nombres de clase únicos, mucho más de lo que contendría cualquier hoja de estilos real. El orden es determinista: el primer nombre de clase por orden alfabético siempre recibe «a», el segundo recibe «b», etc.
Sí. La tabla de renombrado muestra cada correspondencia de original a corto, y puedes copiar el mapa completo como JSON con el botón de copiar. Este JSON puede integrarse en tu canal de compilación, por ejemplo con un plugin de PostCSS o un cargador personalizado de webpack, para que los nombres de clase se ofusquen automáticamente durante la compilación de producción.
La herramienta trabaja con CSS sin procesar y texto HTML/JSX. Para CSS-in-JS (styled-components, Emotion, etc.), pega el contenido de la plantilla literal CSS directamente en la entrada de CSS. Para CSS Modules, pega el CSS de origen y el JSX que usa los nombres de clase del módulo. Después podrás adaptar el CSS/HTML de salida a tu framework preferido. El mapa de renombrado es especialmente útil para la configuración de CSS Modules.
Por supuesto. El ofuscador de nombres de clases CSS se ejecuta 100 % en tu navegador. Tu CSS, tu HTML y los mapas generados nunca salen de tu dispositivo. No hay analíticas, ni llamadas a API, ni procesamiento en servidor, ni almacenamiento de datos de ningún tipo. Tu privacidad está completamente protegida.
Sí: 100 % gratis, sin registro, sin cuenta y sin límites de uso. Ofusca tantas hojas de estilo como necesites, con tantos nombres de clase como quieras y tantas veces como quieras. Sin niveles premium, sin cargos ocultos y sin límites de velocidad: gratis para siempre.