Embellecedor de CSS
El CSS minificado o pegado a la ligera suele ser una sola línea interminable: sin indentación, sin espacios entre reglas, con las declaraciones una tras otra. Funciona en el navegador, pero es imposible de leer, revisar o editar. Este formateador toma ese bloque de texto y lo recompone como debe verse una hoja de estilos: una declaración por línea, indentación uniforme y líneas en blanco entre reglas. Primero analiza el CSS en un árbol sintáctico real, así que el resultado visual no cambia, solo la presentación. Elige tu estilo de indentación y todo se ejecuta en tu navegador.
- Convierte CSS minificado o en una sola línea en una hoja de estilos legible, con una declaración por línea e indentación uniforme
- Reformatea a partir de un árbol sintáctico real: selectores, valores, reglas at y el resultado visual se mantienen intactos
- Indenta con dos espacios, cuatro espacios o tabuladores para adaptarse al estilo de tu proyecto
- Se ejecuta completamente en tu navegador: el CSS de terceros, proyectos de clientes o material sin publicar nunca sale de tu dispositivo
Resumen
Para leer una hoja de estilos que no escribiste, o que un paso de build comprimió, lo primero es devolverla a una forma que tus ojos puedan seguir. Esta herramienta lo hace sin alterar el significado del CSS.
- 01
Reformateo basado en parser
El CSS se lee en un árbol sintáctico antes de imprimirse, por lo que la herramienta entiende selectores, bloques y reglas at en lugar de adivinar dónde cortar la línea. Un formato derivado del árbol sintáctico no puede corromper valores ni eliminar reglas inadvertidamente.
- 02
Diseño uniforme y predecible
Cada declaración ocupa su propia línea, la anidación se indenta de forma consistente y las reglas se separan con líneas en blanco. La misma entrada siempre produce la misma salida, un resultado lo bastante estable para commitear y comparar con diff.
- 03
Indentación a tu medida
Elige dos espacios, cuatro espacios o tabuladores para que la anidación se lea como tu equipo espera, y luego contrae o expande todos los bloques a la vez o activa el ajuste de línea mientras revisas.
- 04
Reglas at y CSS moderno
Media queries, container queries, bloques supports, keyframes, propiedades personalizadas y anidación se formatean con la indentación correcta en lugar de tratarse como texto plano.
- 05
Conteo de líneas y bytes
El panel de salida muestra cuántas líneas ocupa la hoja formateada y su tamaño, para que veas de un vistazo lo denso que era el original.
- 06
Copiar, descargar o subir
Pega desde el portapapeles, abre un archivo .css desde disco, y luego copia el resultado limpio o guárdalo. Todo el proceso queda en tu equipo y nunca pasa por un servidor.
Cómo usarla
Pasa de un bloque ilegible de CSS a una hoja de estilos limpia y con indentación uniforme en unos pocos pasos.
- 01
Pega tu CSS minificado o desordenado en el panel de entrada, o usa «Subir» para abrir un archivo .css desde disco.
- 02
Elige tu estilo de indentación y activa las comillas simples si es la convención de tu proyecto.
- 03
Lee el CSS formateado a la derecha, con una declaración por línea y reglas separadas, que se actualiza conforme ajustas las opciones.
- 04
Copia el resultado o descárgalo como archivo .css, y llévalo a tu editor para leerlo, revisarlo o seguir trabajando.
Detalles
Los detalles que hacen que el resultado formateado sea fiable y cómodo de usar.
- Basado en Prettier, que reformatea a partir de una representación parseada en lugar de adivinar dónde insertar saltos de línea.
- El formateo se ejecuta mientras escribes y cambias opciones, sin necesidad de pulsar ningún botón.
- Los errores de sintaxis se muestran en el lugar correspondiente con su mensaje, en vez de producir una salida parcial o vacía.
- Tanto la entrada como el resultado tienen resaltado de sintaxis CSS completo en temas claro y oscuro.
- Nada se sube ni se registra. El CSS que pegas permanece en tu navegador y desaparece al cerrar la pestaña.
Casos de uso
Situaciones donde convertir CSS denso en algo legible realmente vale la pena.
-
Leer una hoja de estilos minificada
Cuando la única copia de una hoja de estilos es el archivo minificado en producción o un CDN, fórmateala aquí para ver cómo están estructurados realmente los selectores y las reglas.
-
Revisar CSS de terceros o generado
Lo que producen frameworks, herramientas CSS-in-JS o widgets de terceros suele llegar comprimido. Formatearlo hace posible una revisión de código o una auditoría.
-
Depurar problemas de especificidad
El CSS bien dispuesto facilita detectar selectores duplicados, declaraciones mal ubicadas o reglas at que sobreescriben tus estilos silenciosamente.
-
Obtener un diff limpio
Formatea ambas versiones de una hoja de estilos de la misma manera, y la herramienta de diff mostrará los cambios reales en lugar de ahogarlos en ruido de espacios.
-
Ordenar CSS pegado
Los fragmentos copiados de documentación, respuestas en línea o chats llegan con espaciado inconsistente. Un solo paso los normaliza a tu estilo de indentación.
-
Enseñar y compartir ejemplos
Una hoja de estilos con formato uniforme es más fácil de explicar en un tutorial, un comentario de código o un pull request que una con espaciado irregular.
Ver también
¿Necesitas enviar a producción en vez de leer? ElMinificador de CSS comprime el mismo CSS en la dirección opuesta, y para scripts elEmbellecedor de JavaScript formatea JavaScript de la misma manera legible.
Formatear frente a minificar
Formatear y minificar son la misma idea en direcciones opuestas: ambos solo tocan los caracteres que el navegador ignora, nunca el significado. Uno añade los espacios que hacen legible el CSS; el otro los elimina.
-
Formatear es reversible y seguro
Añadir indentación, saltos de línea y espacios no cambia nada en cómo se renderiza la página. El navegador trata una línea y cuarenta como iguales, así que formatear es un cambio de presentación para humanos, no una reescritura de estilos.
-
Por qué el CSS minificado es ilegible
El paso de build elimina cada espacio y salto de línea opcionales para ahorrar bytes. Es ideal para producción, pero deja una única línea donde selector, bloque y la siguiente regla se funden sin ninguna frontera visual.
-
No es des-minificar
Formatear restaura la disposición, no el código fuente original. Los comentarios que el minificador eliminó se pierden, y las reglas que fusionó o reordenó permanecen así. Obtienes CSS legible, no una copia byte a byte de lo que el autor escribió.
-
Idempotente por diseño
Formatear CSS ya formateado produce exactamente el mismo texto. Como la salida es determinista, es seguro ejecutarlo en cada guardado o en un hook pre-commit sin generar diffs de puro ruido.
-
Solo CSS estándar
Esto formatea CSS puro. La sintaxis de Sass, Less u otros preprocesadores debe compilarse primero, ya que el parser espera el CSS que realmente recibiría un navegador.
-
Una herramienta para leer y revisar
El objetivo es la comprensión: hacer que una hoja de estilos comprimida o desconocida sea fácil de recorrer, comparar y razonar. Para producción, sigues minificando, que es la imagen espejo de este paso.
Buenas prácticas
Hábitos para aprovechar al máximo el formateo de CSS.
- Usa el formateador para leer y revisar, pero conserva el código fuente legible original como referencia cuando lo tengas.
- Elige un solo estilo de indentación para cada proyecto y mantenlo, así los archivos formateados se comparan limpiamente entre sí.
- Recuerda que el formateo no recupera comentarios ni deshace reglas que el minificador fusionó: restaura la disposición, no el código fuente original.
- Para tu propio código, integra un formateador en el editor o en un hook pre-commit para que los archivos se mantengan consistentes sin pegar manualmente cada vez.
- Compila Sass o Less a CSS estándar antes de formatear, ya que la sintaxis de preprocesador no es CSS válido por sí sola.
Limitaciones
Lo que esta herramienta hace y lo que deja a otros pasos.
- Reformatea un bloque de CSS estándar. No empaqueta imports, no resuelve URLs ni añade prefijos de navegador.
- Restaura la disposición, no la información perdida. Los comentarios y la estructura eliminados por el minificador no vuelven.
- El código fuente de preprocesadores como Sass, Less o Stylus debe compilarse a CSS primero, ya que aquí solo se analiza CSS estándar.
- Un error de sintaxis detiene el formateo y se reporta, así que una entrada muy rota no producirá una salida parcial en silencio.
Preguntas frecuentes
Preguntas frecuentes sobre el formateo de CSS y cuándo recurrir a él.
¿Formatear cambia cómo se renderiza mi CSS?
No. Solo añade los espacios y saltos de línea que el navegador ignora: indentación, espaciado entre reglas y una declaración por línea. Selectores, valores y reglas at no se tocan, así que la página se ve exactamente igual antes y después.
¿Puede revertir completamente un minificador?
Revierte la disposición, no la información. Formatear restaura el espaciado y la indentación legibles, pero los comentarios que el minificador eliminó ya no están, y las reglas fusionadas o reordenadas permanecen así. Obtienes CSS limpio y legible, no una copia idéntica del código fuente original.
¿Qué opciones de indentación hay?
Puedes indentar con dos espacios, cuatro espacios o tabuladores. La opción de comillas simples cambia las comillas en cadenas y url() cuando es seguro, y puedes contraer, expandir o ajustar líneas mientras revisas la salida.
¿Puedo formatear Sass, Less o SCSS aquí?
No directamente. Esta herramienta formatea CSS estándar, el que recibe un navegador. Compila primero tu Sass o Less a CSS y pega el resultado aquí, o usa un formateador que entienda la sintaxis de tu preprocesador.
¿Se mantienen mis media queries y propiedades personalizadas?
Sí. Media queries, container queries, bloques supports, keyframes, propiedades personalizadas y anidación se analizan y formatean correctamente. La estructura se entiende en vez de tratarse como texto plano, así que el CSS válido sobrevive al formateo sin cambios.
¿Mi CSS se sube a algún sitio?
No. Todo se ejecuta en tu navegador. El CSS que pegas y cualquier archivo que abras se procesan localmente, nunca se transmiten ni almacenan, y desaparecen al cerrar la pestaña. Los estilos de terceros y el trabajo sin publicar se mantienen privados.
Herramientas relacionadas
Sigue explorando el resto del kit de herramientas de datos y formato.