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 una línea 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.
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 vecinas se separan con una línea en blanco salvo que lo desactives. 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, capas en cascada, keyframes, propiedades personalizadas y reglas anidadas se formatean con la indentación correcta en lugar de tratarse como texto plano.
- 05
Errores con los que puedes actuar
Cuando el CSS no se puede analizar, verás juntos el motivo, la línea y la columna, y un extracto del código problemático, así que buscas la llave suelta en vez de adivinar dónde se rindió el formateador.
- 06
Copiar, descargar o subir
Pega desde el portapapeles, abre un archivo .css desde disco y luego copia el resultado ordenado o guárdalo. Todo el proceso se queda en tu equipo y nunca toca un servidor.
Cómo usarla
Pasa de un bloque de CSS ilegible a una hoja de estilos limpia y con formato 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 o desactiva las comillas simples y la línea en blanco entre reglas según tu estilo de casa.
- 03
Lee el CSS formateado a la derecha, con una declaración por línea y las reglas separadas, actualizándose mientras 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 fiable y cómodo el resultado formateado.
- Construido sobre Prettier, que reformatea a partir de una representación analizada en vez de adivinar dónde insertar saltos de línea.
- El formato se ejecuta mientras escribes y al cambiar las opciones, sin ningún botón que pulsar para ver el resultado.
- Un error de sintaxis se informa con su motivo, su posición y la línea afectada, en lugar de producir una salida a medio formatear o vacía.
- Tanto la entrada como el resultado formateado se muestran con 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
Dónde compensa devolver el CSS denso a una forma legible.
-
Leer una hoja de estilos minificada
Cuando la única copia de una hoja de estilos es el archivo minificado en producción o en una CDN, formatéalo aquí para ver cómo están estructuradas realmente las reglas y los selectores.
-
Revisar CSS de terceros o generado
La salida de un framework, de una herramienta CSS-in-JS o de un widget externo suele publicarse aplastada. Formatearla hace posible una revisión de código o una auditoría.
-
Depurar un problema de especificidad
Con el CSS bien dispuesto es mucho más fácil detectar el selector duplicado, la declaración fuera de sitio o la regla at que está sobrescribiendo tus estilos en silencio.
-
Obtener un diff limpio
Formatea igual las dos versiones de una hoja de estilos y la herramienta de diff mostrará el cambio real en vez de ahogarlo en ruido de espacios.
-
Ordenar CSS que pegaste
Los fragmentos copiados de la documentación, de una respuesta en internet o de un chat llegan con espaciado inconsistente. Una pasada 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 una pull request que otra con espaciado improvisado.
Ver también
¿Toca publicar en lugar de leer? El Minificador de CSS comprime el mismo CSS en la dirección contraria, y para los scripts el Embellecedor de JavaScript deja el JavaScript igual de legible. Y cuando la hoja de estilos no es un archivo propio sino que vive dentro de una página, formatear el marcado y el CSS que contiene en una sola pasada es el Embellecedor de HTML.
Formatear frente a minificar
Formatear y minificar son la misma idea en direcciones opuestas: ambas tocan solo los caracteres que el navegador ignora, nunca el significado. Una añade los espacios que hacen legible el CSS; la otra los quita.
-
El formato 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. Un navegador trata una línea y cuarenta como idénticas, así que embellecer es un cambio de presentación para personas, no una reescritura de tus estilos.
-
Por qué el CSS minificado es ilegible
Un paso de build elimina cada espacio y salto de línea opcional para ahorrar bytes. Es ideal para publicar, pero deja una sola línea donde un selector, su bloque y la regla siguiente se suceden sin ninguna frontera visual.
-
No es deshacer la minificación
Formatear restaura la disposición, no el código original. Los comentarios que la minificación eliminó no vuelven, y las reglas fusionadas o reordenadas siguen así. Obtienes CSS legible, no una copia byte a byte de lo que escribió su autor.
-
Idempotente por diseño
Formatear un CSS ya formateado produce el mismo texto. Como la salida es determinista, puedes ejecutarlo en cada guardado o en un hook de pre-commit sin generar diffs ruidosos.
-
Solo CSS estándar
Esto formatea CSS puro. Sass, Less y otras sintaxis de preprocesador deben compilarse antes, ya que el parser espera el CSS que un navegador recibiría de verdad.
-
Una herramienta para leer y revisar
El objetivo es comprender: dejar una hoja aplastada o desconocida fácil de recorrer, comparar y razonar. Para publicar sigues minificando, que es la imagen espejo de este paso.
Buenas prácticas
Hábitos para sacar el máximo partido a formatear CSS.
- Usa el formateador para leer y revisar, pero mantén como fuente de verdad el código legible original cuando lo tengas.
- Elige un estilo de indentación por proyecto y mantenlo, así los archivos formateados se comparan limpiamente entre sí.
- Deja la línea en blanco entre reglas mientras lees CSS desconocido, y quítala cuando quieras la forma legible más corta para pegarla en otro sitio.
- Recuerda que formatear no recupera comentarios ni deshace las reglas que la minificación fusionó: restaura la disposición, no el código original.
- Para tu propio proyecto, integra un formateador en el editor o en un hook de pre-commit para que los archivos se mantengan uniformes sin pegar nada a mano.
- Compila Sass o Less a CSS estándar antes de formatear, ya que la sintaxis exclusiva del preprocesador no es CSS válido por sí sola.
Limitaciones
Lo que esta herramienta hace y lo que deja a otros pasos.
- Reformatea un único 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 que quitó la minificación no vuelven.
- Las fuentes de preprocesador como Sass, Less o Stylus deben compilarse a CSS primero, ya que aquí solo se analiza CSS estándar.
- Un error de sintaxis detiene el formateo y se informa con su posición, así que una entrada muy dañada no produce en silencio una salida parcial.
- Los archivos se leen en el navegador, así que las subidas están limitadas a 2 MB. Cualquier cosa mayor se abre mejor en tu editor.
Preguntas frecuentes
Preguntas frecuentes sobre formatear CSS y cuándo recurrir a ello.
¿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, separación entre reglas y una declaración por línea. Los selectores, los valores y las reglas at conservan su significado; lo único que se reescribe es la forma de escribirlos, como imprimir 0.5rem en lugar de .5rem, así que la página se ve exactamente igual antes y después.
¿Puede revertir del todo 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ó no están, y las reglas que fusionó o reordenó siguen así. Obtienes CSS limpio y legible, no una copia byte a byte del original.
¿Qué opciones de formato hay?
Puedes indentar con dos espacios, cuatro espacios o tabuladores, y decidir si las reglas vecinas se separan con una línea en blanco. La opción de comillas simples cambia el entrecomillado de cadenas y valores url() cuando es seguro, y mientras lees puedes contraer, expandir o ajustar las líneas.
¿Qué pasa si mi CSS tiene un error de sintaxis?
El formateo se detiene y la herramienta muestra qué falló: el motivo, la línea y la columna, y la propia línea con una marca bajo el problema. No se produce nada a medio formatear, porque un formateador que se salta a ciegas una llave suelta estaría reordenando código que no entiende.
¿Puedo formatear Sass, Less o SCSS aquí?
No directamente. Esta herramienta formatea CSS estándar, que es lo que recibe un navegador. Compila tu Sass o Less a CSS primero y pega esa salida aquí, o usa un formateador que entienda la sintaxis de tu preprocesador.
¿Mantendrá intactas mis media queries y propiedades personalizadas?
Sí. Las media queries y container queries, los bloques supports, las capas en cascada, los keyframes, las propiedades personalizadas y las reglas anidadas se analizan y se disponen correctamente. La estructura se entiende en vez de tratarse como texto plano, así que el CSS válido conserva su significado tras el formateo.
¿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, así que los estilos de terceros y el trabajo sin publicar siguen siendo privados.
Herramientas relacionadas
Sigue con el resto del kit de herramientas de datos y formato.