Embellecedor de CSS

Qué hace esta herramienta

Toma CSS minificado, mal indentado o simplemente heredado de otro y lo devuelve legible: una declaración por línea, indentación consistente y bloques separados. Admite CSS, SCSS y Less, y todo el trabajo ocurre en tu navegador.

Es el inverso exacto del minificador de CSS: uno prepara el archivo para producción, este lo prepara para que un humano lo entienda.

Qué se recupera y qué no

Conviene ser claro, porque hay una expectativa habitual que no se puede cumplir.

Vuelve: la indentación, los saltos de línea, el espacio alrededor de los dos puntos y las llaves, un selector por línea cuando hay varios, y el orden legible de las reglas.

No vuelve: los comentarios, que el minificador borró y no están en ninguna parte del archivo. Tampoco los nombres originales si el proceso incluyó ofuscación de clases —lo que hacen algunas herramientas de CSS a medida—, porque .a1b2 es lo único que quedó en el archivo.

Dicho de otro modo: recuperas la estructura, no el original. Y con la estructura basta para leer, depurar y modificar la hoja.

Cuándo se usa esto de verdad

• Auditar el CSS de un sitio en producción, propio o ajeno, cuando solo tienes el bundle final.
• Recuperar una hoja de estilos cuyo fuente se perdió y solo queda lo desplegado.
• Unificar el estilo de un archivo que han tocado cinco personas con cinco configuraciones de editor distintas.
• Revisar un diff imposible en el que alguien commiteó CSS minificado y la diferencia sale como una única línea de veinte mil caracteres.

SCSS y Less no son CSS

Elegir bien el dialecto arriba no es un detalle cosmético. El analizador de CSS plano no entiende el anidamiento, los mixins, @extend ni las variables con $ o @, así que rechazaría un archivo SCSS perfectamente válido como error de sintaxis.

Si tu archivo lleva anidamiento o variables de preprocesador, marca SCSS o Less y funcionará.

Los errores de sintaxis más frecuentes

Para formatear hay que analizar primero, así que un archivo que no se puede analizar no se puede formatear. Los tres casos que aparecen una y otra vez:

1. Una llave sin cerrar. El error suele señalar mucho más abajo del punto real, porque el analizador sigue tragando reglas hasta que algo le resulta imposible. Empieza a buscar desde la línea indicada hacia arriba.
2. Un punto y coma de más justo antes de la llave de cierre en algunas construcciones anidadas.
3. Copiar y pegar a medias, que deja el archivo cortado por la mitad. Suena tonto, y es la causa más habitual.

La herramienta te da línea y columna, que es lo que ahorra el tiempo.

Sobre el formateador

Usa Prettier (licencia MIT) compilado para navegador. Es opinionado a propósito: casi no ofrece opciones porque su valor está en que dos personas obtengan el mismo resultado. Lo que sí puedes ajustar aquí es la indentación —dos espacios, cuatro o tabulaciones— y el ancho máximo de línea.