Utilore

Formatear CSS

Pega una hoja de estilo —aunque llegue en una sola línea— y vuelve a leerla. Cada declaración ocupa su línea, los bloques anidados reciben su sangría y los comentarios se quedan donde deben.

El código nunca sale de esta página: el formateo ocurre en tu navegador.

Cómo usarlo

  1. Pega el CSS en el primer campo.
  2. Elige la sangría: dos espacios, cuatro o tabulador.
  3. Copia el resultado, o pulsa «Minificar» para comprimirlo de nuevo.

Lo que conviene saber

Por qué un formateador ingenuo rompe hojas de estilo

Cortar en cada punto y coma y en cada llave parece funcionar hasta que el archivo contiene content: "a;b" o un data URI con un SVG dentro de url(). Ambas cosas son normales en CSS real. Este formateador lee el archivo carácter a carácter, de modo que las cadenas entre comillas y los comentarios se trasladan enteros en vez de partirse en el primer signo.

Un anidamiento que de verdad ayuda

Las media queries, los bloques supports y las reglas anidadas modernas añaden un nivel cada uno, y la sangría lo sigue. Una línea en blanco separa las reglas de primer nivel, así una hoja de dos mil líneas se lee como una lista de bloques y no como un muro de texto.

Preguntas frecuentes

¿Se conservan mis comentarios?

Sí. Un comentario suelto ocupa su propia línea; uno que va tras una declaración se queda con ella.

¿Modifica mi CSS?

No se renombra, reordena ni elimina ninguna propiedad. Solo se mueven los espacios: la hoja se comporta igual que antes.

¿Se envía mi código a un servidor?

No. Todo ocurre en tu navegador, así que una hoja de un proyecto bajo acuerdo de confidencialidad se queda en tu equipo.

¿Y con SCSS o LESS?

Las reglas anidadas y los comentarios se formatean bien. Variables, mixins y directivas de control pasan tal cual, sin ser interpretados.

Herramientas relacionadas