Formateador de CSS

Pega una hoja de estilos o fragmento de CSS y esta herramienta le dará formato con una sangría uniforme, o lo comprimirá en una sola línea densa. El CSS mal formado, con llaves sin cerrar o reglas sueltas, se formatea igualmente en lugar de generar un error, así que puedes limpiar un CSS descuidado sin corregir cada fallo de sintaxis primero.

¿Cómo funcionan el formateo y la minificación?

El formateo se apoya en la biblioteca js-beautify, a la que puedes pedir sangría de 2 espacios, 4 espacios o tabulaciones. Trabaja con tokens en vez de con un analizador estricto, así que una hoja de estilos con una llave de cierre olvidada o un punto y coma suelto sale con una sangría razonable en lugar de provocar un error, algo que importa si estás limpiando CSS copiado de las herramientas de desarrollo del navegador o de un archivo a medio terminar. La minificación va por el camino contrario: elimina comentarios, colapsa espacios en blanco y quita los espacios innecesarios alrededor de { } ; : , >, pero deja intacto el contenido de las cadenas entre comillas y de las llamadas a url(...), para que una ruta o un nombre de fuente con espacios sobreviva tal cual.

El minificador funciona con una serie de expresiones regulares y no con un analizador de CSS completo, así que tiene un par de casos límite conocidos: un url() con un paréntesis de cierre literal dentro de un argumento entre comillas no se procesa bien, y colapsar el espacio antes de dos puntos puede unir un combinador descendiente con la pseudo-clase siguiente (convirtiendo a :hover en a:hover, que selecciona algo distinto). Ambos casos son raros en CSS real, y la herramienta acepta ese pequeño riesgo a cambio de no atragantarse nunca con entradas imperfectas.

¿Se sube mi CSS a algún sitio?

No. El formateo y la minificación ocurren enteramente en tu navegador usando la biblioteca incluida en la página; no se envía nada a un servidor. Las hojas de estilo propias, el trabajo de clientes o los fragmentos extraídos con contenido real se quedan en tu máquina, algo útil cuando el CSS que estás limpiando viene de un código interno que prefieres no pegar en un formulario web cualquiera.

Usos habituales: ordenar una hoja de estilos minificada guardada desde ver código fuente, reducir un archivo CSS antes de publicarlo, o reformatear los estilos de un componente con un ancho de sangría constante para una revisión de código. Consulta la referencia de sintaxis CSS de MDN para ver cómo encajan selectores, declaraciones y reglas @.