¿Por qué necesitas formatear código CSS?
El código CSS que proviene de una herramienta de minificación o que se copia de una fuente externa suele venir en una sola línea larga sin espacios, lo que dificulta seguir las reglas y las propiedades dentro de cada selector. El formateo separa cada propiedad en una línea independiente y ordena las llaves, así puedes leer el código y editarlo fácilmente sin perderte en un texto amontonado.
La estructura de CSS que hace el formateo más claro
La estructura de CSS es sencilla: cada regla se compone de un selector seguido de una llave de apertura {, después un conjunto de propiedades, cada una en forma de propiedad: valor; y una llave de cierre } al final. Lo que más dificulta la lectura suele ser escribir todas las propiedades en una sola línea u olvidar el punto y coma después del valor. La herramienta ordena cada regla en una línea separada y aplica una sangría uniforme para cada propiedad dentro de las llaves, así puedes detectar al instante si falta una llave o un punto y coma antes de que el código llegue al navegador.
Cómo formatear el código
La herramienta ordena el código al instante:
Abre el formateador de CSS
Abre la herramienta directamente desde la página de herramientas.
Pega el código CSS
Pega el código que quieras formatear en el cuadro de entrada.
Deja que la herramienta lo formatee
La herramienta ordena las propiedades y las llaves con una sangría clara de forma automática.
Copia el resultado
Copia el código formateado listo o descárgalo como archivo.