Embellecedor de CSS

El Embellecedor de CSS reformatea hojas de estilo minificadas, comprimidas o con indentación inconsistente en CSS limpio y legible — indentación consistente, propiedades ordenadas y espaciado claro entre reglas — para que realmente puedas leerlo, revisarlo y editarlo. Pega una hoja de estilo minificada, un archivo CSS empaquetado, o CSS desordenado escrito a mano, y obtén una salida formateada al instante.

• •Indentación: 2 espacios, 4 espacios o tabulaciones, aplicadas mediante el motor de formateo real js-beautify
• •Ordenación de propiedades: alfabetiza las declaraciones dentro de cada bloque de reglas para un estilo consistente y fácil de escanear
• •Ordenación de media queries: ordena los bloques @media de nivel superior por punto de quiebre, ascendente para min-width y descendente para max-width
• •Espaciado de reglas: añade una línea en blanco entre reglas para separación visual, o mantiene la salida compacta
• •Preservación de comentarios: mantén o elimina los comentarios /* ... */ durante el formateo
• •Normalización de color: acorta los colores hexadecimales de 6 dígitos y los valores rgb() a la forma abreviada hexadecimal de 3 dígitos cuando los canales lo permiten

• •Leer una hoja de estilo de producción minificada para depurar un problema de diseño en las DevTools del navegador
• •Reformatear CSS pegado de un mensaje de chat, PDF o correo que perdió su indentación original
• •Estandarizar el orden de propiedades y la indentación antes de una revisión de código
• •Hacer que una hoja de estilo empaquetada o generada — de una compilación CSS-in-JS o salida de preprocesador — sea lo suficientemente legible para auditarla
• •Limpiar CSS exportado de una herramienta de diseño antes de hacer commit

1. 1.Pega tu CSS en el editor de entrada, o sube un archivo .css
2. 2.Elige la indentación — 2 espacios, 4 espacios o tabulaciones
3. 3.Activa la preservación de comentarios, ordenación de propiedades, ordenación de media queries, espaciado de reglas y normalización de color según necesites
4. 4.La salida formateada aparece automáticamente mientras escribes
5. 5.Copia la salida o descárgala como archivo .css

• •Ordenar propiedades alfabéticamente puede separar declaraciones relacionadas lógicamente, como margin y margin-top — revisa la salida ordenada antes de adoptarla como una regla de estilo estricta
• •Las propiedades con prefijo de proveedor (-webkit-, -moz-) se ordenan junto con sus equivalentes sin prefijo, lo que puede colocar un fallback con prefijo después de la propiedad estándar
• •El verificador de llaves marca { y } no coincidentes mientras escribes, pero es un escaneo heurístico, no un analizador CSS completo — no puede detectar todo tipo de sintaxis inválida

• •Esta es una herramienta de formateo, no un linter — no detectará nombres de propiedades inválidos, brechas de compatibilidad de navegadores, o conflictos de especificidad de selectores
• •Las hojas de estilo extremadamente grandes (paquetes de varios MB) pueden ser lentas de embellecer en el navegador — un formateador integrado en una herramienta de compilación (Prettier, Stylelint --fix) es más adecuado para el formateo de código a gran escala
• •Para aplicar un estilo CSS consistente en todo un equipo, una herramienta dedicada como Stylelint o Prettier integrada en tu editor/CI es más apropiada que el formateo ad hoc en el navegador

Si tienes CSS legible y necesitas reducirlo para producción — disminuyendo el tamaño del archivo y el tiempo de carga de la página — usa en su lugar el Minificador de CSS. Colapsa espacios en blanco, acorta colores, y puede eliminar ceros redundantes para una compresión máxima.