Ofuscador de nombres de variables CSS

B

Tamaño del CSS original

B

Tamaño del CSS ofuscado

0 ? 'text-amber-500' : 'text-green-500'}`}> %

Cambio de tamaño

No se han detectado propiedades personalizadas CSS (--variable). Asegúrate de que tu CSS contiene declaraciones --custom-property: valor.

• Renombrado y protección de variables CSS al instante: nuestro ofuscador de nombres de variables CSS renombra al instante todas las propiedades personalizadas CSS de tu código. Pega CSS con variables significativas como --primary-color y --text-color, y se sustituyen por nombres cortos y ofuscados como --a y --b, preservando automáticamente todas las referencias var() de la hoja de estilos.
• Doble garantía de privacidad: tu código CSS nunca sale de tu navegador cuando usas nuestro ofuscador de variables CSS. Todo el renombrado ocurre localmente: sin subidas a servidores, sin recopilación de datos y sin rastreo. La arquitectura de tu sistema de diseño y tus convenciones de nombres de variables permanecen 100% privadas en tu dispositivo.
• Sin límites de tamaño de archivo: ofusca archivos CSS grandes sin restricciones. Nuestro ofuscador gratuito de nombres de variables CSS admite entradas de cualquier tamaño, desde pequeñas hojas de estilos de componentes hasta enormes archivos de sistemas de diseño. Perfecto para proyectos de nivel empresarial y flujos de trabajo de protección masiva de CSS.
• 100% gratis para siempre: usa nuestro ofuscador de nombres de variables CSS totalmente gratis y sin limitaciones. Sin registro, sin costes ocultos, sin planes premium, sin anuncios: solo ofuscación de variables CSS ilimitada y gratuita siempre que la necesites. El mejor ofuscador de variables CSS gratuito disponible online.

• Protección de sistemas de diseño CSS: los autores de sistemas de diseño usan el ofuscador de nombres de variables CSS para proteger sus convenciones de nombres de tokens de diseño al distribuir bibliotecas CSS o frameworks de componentes. Nombres de variable significativos como --color-primary y --spacing-unit se ofuscan a nombres cortos, lo que dificulta que los consumidores deduzcan la arquitectura del sistema de diseño.
• Distribución de bibliotecas CSS de terceros: los autores de bibliotecas CSS usan el ofuscador de variables antes de publicar paquetes en npm o CDN. Al renombrar --theme-background a --a, las convenciones internas de nombres de variables de la biblioteca quedan ocultas a los consumidores, mientras que el CSS sigue siendo totalmente funcional gracias a la actualización automática de las referencias var().
• Ofuscación de frameworks de front-end: los desarrolladores de frameworks usan el ofuscador de nombres de variables CSS para proteger las propiedades personalizadas en bibliotecas de componentes. Ofuscar los nombres de variables evita conflictos de nombres con las hojas de estilos de los consumidores y dificulta que los usuarios finales sobrescriban por error las variables internas del framework.
• Distribución de archivos de temas: los desarrolladores de temas usan el ofuscador de variables CSS al distribuir archivos de temas premium. Los nombres de variables que revelan la estructura del tema o su sistema de nombres de color se ofuscan, protegiendo la propiedad intelectual del diseño del tema sin alterar el resultado visual.
• Bundles de producción con CSS-in-JS: los desarrolladores que usan soluciones CSS-in-JS (styled-components, Emotion) usan el ofuscador de nombres de variables CSS sobre los bundles CSS extraídos para el despliegue en producción. Los nombres de variables se acortan para reducir el tamaño del bundle y proteger las convenciones internas de nombres de la inspección con las herramientas de desarrollo del navegador.
• Aprender la ofuscación de variables CSS: los estudiantes y desarrolladores que aprenden técnicas de ofuscación CSS usan el ofuscador de nombres de variables para entender cómo se pueden renombrar las propiedades personalizadas manteniendo toda su funcionalidad. La tabla de mapeo de renombrado muestra la relación entre los nombres originales y los ofuscados.

La ofuscación de nombres de variables CSS es el proceso de renombrar las propiedades personalizadas CSS (también llamadas variables CSS) de nombres significativos y descriptivos a identificadores cortos y sin significado. Las propiedades personalizadas se declaran con el prefijo de doble guion, como --primary-color: #3498db;, y se referencian mediante la función var(), como color: var(--primary-color); . Nuestro ofuscador de nombres de variables CSS encuentra automáticamente todas las declaraciones y referencias, las sustituye por nombres cortos ( --a , --b , etc.) y muestra una tabla completa de mapeo del renombrado, todo manteniendo el CSS totalmente funcional.

1. 1. Pega tu código CSS: pega en el panel de entrada el código CSS que contiene propiedades personalizadas. La herramienta busca automáticamente todas las declaraciones --variable-name: y las referencias var(--variable-name). Pulsa "Cargar CSS de ejemplo" para probarla con una hoja de estilos de muestra con variables típicas de un sistema de diseño.
2. 2. Pulsa Ofuscar variables CSS: la herramienta extrae todos los nombres de variables únicos, identifica cuántas veces aparece cada uno (declaraciones + referencias) y genera nombres de reemplazo cortos usando un alfabeto de base 52. Los nombres más largos se reemplazan primero para evitar coincidencias parciales. Cada reemplazo distingue mayúsculas y minúsculas y conserva exactamente la estructura CSS.
3. 3. Revisa el mapeo y exporta: el CSS ofuscado aparece en el panel de salida junto a una tabla completa de mapeo de nombres de variables que muestra el nombre original, el nombre ofuscado, el número de apariciones y el cambio de longitud. Copia el CSS ofuscado en el portapapeles o descárgalo como archivo .css listo para distribuir.

• Detección de declaraciones: la herramienta encuentra todos los patrones de declaración --name: value; en el CSS. Se detectan con el patrón /--([a-zA-Z][\w-]*)\s*:/g , que captura nombres estándar de propiedades personalizadas CSS, incluidos guiones y guiones bajos.
• Detección de referencias: todas las llamadas a la función var(--name) se detectan con un patrón regex independiente. Las referencias se combinan con las declaraciones para crear una lista completa de variables únicas, lo que garantiza que también se renombren las variables usadas mediante var() sin declaraciones explícitas.
• Generación de nombres cortos: los nombres de reemplazo se generan con un alfabeto de base 52 (a-z, A-Z), produciendo primero nombres de un carácter ( --a , --b ) y después nombres de dos caracteres ( --aa , --ab ). Esto minimiza el tamaño del CSS de salida y evita conflictos de nombres.
• Reemplazo seguro: para evitar reemplazos parciales (por ejemplo, renombrar --primary parcialmente dentro de --primary-dark ), los nombres más largos se reemplazan primero. Cada recuento de apariciones se registra por separado para la tabla de mapeo.

El ofuscador de nombres de variables CSS es 100% gratis y no requiere registro . Todo el procesamiento ocurre localmente en tu navegador: tu código CSS nunca sale de tu dispositivo. No hay límites de tamaño de archivo ni de uso. Ten en cuenta que esta herramienta solo renombra propiedades personalizadas CSS dentro del código CSS. Si usas variables CSS en HTML (mediante estilos en línea) o en JavaScript (mediante style.setProperty() ), esas referencias deben actualizarse por separado. El renombrado no es reversible a partir de la salida ofuscada por sí sola: guarda siempre una copia de seguridad de tu CSS original. Para una protección máxima, combínalo con otras técnicas de ofuscación como la minificación y la ofuscación de nombres de clases.