Cómo funciona
Reindenta y ordena hojas de estilo CSS o SCSS comprimidas o mal alineadas para dejarlas legibles. Sirve para inspeccionar estilos minificados, revisar CSS de terceros o unificar el formato antes de guardarlo.
Permite elegir el tipo de indentación (espacios o tabulaciones), el tamaño de sangría y el fin de línea. Cada declaración pasa a su propia línea y los selectores separados por comas se ubican en líneas independientes.
El procesamiento es totalmente local, en tu navegador, con js-beautify. Formatea la presentación; no minifica, no reordena propiedades ni valida que las reglas sean correctas.
Ejemplos
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}Los selectores se separan en líneas y cada propiedad queda sangrada.Casos de uso
- Hacer legible un archivo .css minificado de un sitio.
- Normalizar la indentación de una hoja de estilos antes de un commit.
- Revisar y comparar reglas CSS de un framework o librería.
- Ordenar SCSS pegado desde documentación o generadores.
Preguntas frecuentes
¿Sirve también para SCSS o LESS?
Formatea CSS y sintaxis compatible como SCSS, incluidas reglas anidadas. No compila SCSS ni LESS a CSS: solo reordena la indentación y los saltos de línea.
¿Reordena o agrupa las propiedades?
No. Mantiene el orden original de selectores y declaraciones. Solo cambia el espaciado, la sangría y los saltos de línea para mejorar la legibilidad.
¿Es lo mismo que minificar CSS?
No, es lo opuesto. Formatear agrega espacios y saltos para leerlo mejor; minificar los elimina para reducir el peso del archivo. Para comprimir, usá la herramienta de minificación.
¿Se sube mi código a un servidor?
No. El formateo ocurre íntegramente en tu navegador; el CSS nunca sale de tu equipo.