Estructura reglas y declaraciones CSS

Los desarrolladores usan Formateador CSS antes de una revisión de código, una sesión de depuración o una entrega a otra persona.

Estructura reglas y declaraciones CSS, para facilitar la revisión, la edición y la depuración. Úsalo en el navegador sin crear una cuenta.

Cómo usar

Pega tu hoja de estilos en el área de entrada, o importa uno de los archivos de código aceptados.
Inicia el formateo; las reglas y declaraciones vuelven con una sangría uniforme y saltos de línea claros.
Revisa la salida y localiza los bloques que se veían apretados o desordenados en el archivo original.
Copia la versión ordenada en tu editor y compárala con la fuente antes de confirmar cualquier cambio.
Borra la entrada antes de pegar otro archivo, para que en el área de resultados solo haya un proyecto a la vez.

Ejemplo

Un desarrollador hereda una hoja de estilos escrita de un tirón, con todo apiñado en unas pocas líneas. Pégala aquí, recupera la versión con sangría y léela bloque a bloque: los selectores se alinean y cada declaración queda en su propia línea.

Límites y formatos

Los errores de sintaxis se dejan intactos, así que un punto y coma ausente sigue ausente después de la pasada.
Esta herramienta solo cambia la presentación: no renombra clases ni elimina reglas que ya no usas.
Los archivos aceptados incluyen HTML, CSS, JavaScript, JSON y SQL, mientras que un archivo binario no será legible aquí.
En una hoja muy corta la sangría automática aporta poco, así que comprueba que la salida siga comportándose exactamente igual que la entrada.

Dónde se procesa

El formateo se ejecuta en tu navegador. El código que pegas no se copia en ningún sitio y desaparece cuando cierras la página, así que trabajar con extractos de un proyecto privado no supone riesgo adicional.

Preguntas frecuentes

¿El formateo cambiará el aspecto de mi página?

No. Solo se tocan los espacios, los saltos de línea y la sangría. Los selectores, las propiedades y los valores permanecen exactamente igual, así que el navegador lee la hoja de estilos igual que antes y la página renderizada no se mueve.

¿Puedo formatear una hoja de estilos muy grande?

Depende sobre todo de la memoria de tu dispositivo, ya que todo el trabajo ocurre en el navegador. Con un archivo grande la página puede ralentizarse; divide la hoja en partes y ejecútalas una tras otra.

¿Por qué la salida todavía contiene una línea muy larga?

Algunos valores simplemente son largos, como una pila de fuentes o una función muy anidada. El formateador no divide los valores dentro de una declaración; se concentra en la estructura de los bloques de reglas.