¿Para qué sirve formatear CSS?
Cuando abres el CSS de una web en producción, de una librería o de un tema, lo normal es encontrarlo minificado en una sola línea. Para entender qué estilos se aplican, copiar una regla o encontrar un error necesitas verlo ordenado: un selector por línea, una declaración por línea y una sangría coherente.
Esta herramienta usa Prettier para formatear CSS, SCSS y Less. El analizador se elige según la extensión del archivo (.css, .scss o .less) o con el selector si pegas el código. Puedes elegir sangría de 2 espacios, 4 espacios o tabuladores y un ancho de línea de 80, 100 o 120 caracteres, que decide cuándo partir listas largas de selectores o valores como grid-template-areas, transiciones o varias sombras separadas por comas.
Formatear no cambia los estilos: los selectores, propiedades y valores son los mismos, solo cambian los espacios y saltos de línea. En SCSS y Less se respetan las variables, los mixins, el anidamiento y las funciones, así que puedes formatear el código fuente de tu proyecto, no solo el CSS compilado. Si hay un error de sintaxis, como una llave sin cerrar, verás el mensaje del analizador. Formatear antes de hacer un commit también ayuda a que los diffs muestren solo los cambios reales y no diferencias de espacios.
Todo se ejecuta en tu navegador y el código no se sube a ningún servidor. Tienes una prueba gratis con un archivo o un texto pegado; con ToolStudio Pro el uso es ilimitado y puedes formatear varios archivos a la vez y descargarlos juntos en un ZIP.
¿Cómo formatear CSS?
- Pega tu código o arrastra un archivo .css, .scss o .less.
- Si has pegado el código, elige el lenguaje: CSS, SCSS o Less.
- Elige la sangría y el ancho de línea.
- Pulsa el botón para formatear.
- Copia el resultado o descárgalo.
Usos habituales
- Leer el CSS minificado de una web para entender cómo está hecha.
- Ordenar hojas de estilo heredadas con formato inconsistente.
- Dar formato a archivos SCSS o Less antes de un commit.
- Revisar el CSS que generan herramientas o editores visuales.
- Preparar fragmentos de CSS para documentación o tutoriales.
Antes y después
Entrada minificada: .card{display:flex;gap:1rem}.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.2)}
Salida formateada: cada regla en su bloque, con .card { en una línea, display: flex; y gap: 1rem; sangrados debajo, la llave de cierre sola y una línea en blanco antes de .card:hover. Prettier además normaliza detalles como el espacio tras los dos puntos o el cero inicial en 0.2.
Preguntas Frecuentes
¿Admite SCSS y Less?
Sí. Se detecta por la extensión del archivo o puedes elegirlo en el selector si pegas el código.
¿Cambia mis estilos?
No. Solo cambia la presentación del código: espacios, saltos de línea y pequeños ajustes de formato que no alteran el resultado.
¿Y si quiero reducir el tamaño del CSS?
Usa el minificador de CSS, que hace lo contrario: elimina espacios y comentarios y fusiona reglas.
¿Mi código se sube a algún servidor?
No. Todo el formateo se hace en tu navegador.
¿Es gratis?
Tienes una prueba gratis por herramienta: un archivo o un texto pegado. Después puedes volver a procesar ese mismo texto con otras opciones tantas veces como quieras, pero para procesar código nuevo necesitas ToolStudio Pro, que te da uso ilimitado de todas las herramientas, varios archivos a la vez descargados juntos en un ZIP y ninguna publicidad. Puedes cancelarlo cuando quieras.