Usa el Embellecedor de CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por que las hojas de estilo se desordenan
Una hoja de estilos empieza ordenada y se desordena al crecer. Se anaden reglas con prisa, copiadas de ejemplos, pegadas de otros proyectos y editadas en su lugar hasta que la indentacion se mueve y las reglas de una linea quedan junto a otras enormes. Las hojas minificadas, producidas para produccion, son peores: todo el archivo en pocas lineas, ilegible por diseno. Cuando algo se ve mal en la pagina, encontrar la regla responsable en ese desorden pierde tiempo e invita a errores.
Embellecer devuelve el orden: cada regla en sus propias lineas, declaraciones con indentacion, llaves alineadas, para que la estructura de la hoja se vea de un vistazo. La herramienta de arriba formatea CSS con js-beautify, por completo en tu navegador, convirtiendo un muro de texto en un documento que puedes leer y editar con confianza.
Como usar la herramienta
Pega CSS en la casilla de entrada, elige un tamano de indentacion y pulsa Embellecer. La hoja formateada aparece abajo, junto con un conteo de las reglas encontradas, que es una revision rapida de que todo el archivo se proceso. Copia el resultado o descargalo como archivo de estilos, listo para sustituir al original desordenado.
Prueba primero el boton Cargar ejemplo para ver la transformacion en una muestra pequena. Luego pega tu hoja real. Si el resultado parece incorrecto, revisa primero la entrada por una llave o punto y coma que falte: un formateador sigue la estructura que encuentra, y una estructura rota se formatea en un resultado confuso, lo que en si es una senal util de que algo esta desequilibrado.
Que cambia el formato
Un formateador pone cada selector y cada declaracion en su propia linea, indenta las declaraciones dentro de su regla, y coloca las llaves de forma uniforme. No cambia que selectores coinciden, el orden de las reglas, ni los valores de las propiedades. La pagina con estilo se ve identica antes y despues, porque solo cambia el espacio en blanco. Esa seguridad es el punto: formatear es una limpieza sin riesgo que puedes aplicar a cualquier hoja de estilos.
No ordena propiedades, no fusiona reglas duplicadas, ni quita selectores sin uso. Esos son trabajos de optimizacion y refactorizacion con sus propios riesgos: ordenar es seguro pero cuestion de gusto, fusionar puede cambiar la especificidad, y quitar un selector que parece sin uso puede romper una pagina que anade elementos de forma dinamica. Guarda el formato separado de esas decisiones, y tomalas con calma, una cada vez.
Leer una hoja formateada
Una vez formateada, una hoja se lee de arriba abajo como un indice. Primero los estilos base, luego el diseno, luego los componentes, luego las utilidades y las consultas de medios. Si tu archivo no se lee asi, el formato revela el desorden, y ese es el momento de reorganizar: agrupa reglas relacionadas, mueve las excepciones cerca de las reglas que corrigen, y divide un archivo gigante en otros mas pequenos por zona de la pagina.
Presta atencion a las reglas que aparecen dos veces con valores distintos. El formato hace visibles los duplicados, y los duplicados son una causa comun de la frustracion de “por que no se aplica este cambio”, porque la regla posterior gana y la edicion anterior parece ignorada. Cuando encuentres un duplicado, decide cual es correcto, borra el otro, y deja un comentario si el motivo no es obvio.
Formatear en equipo
Acuerden un tamano de indentacion y un formateador, y ejecutenlo de forma automatica. Las hojas de estilo las editan muchas personas, y sin un paso automatico, cada edicion introduce un estilo un poco distinto, hasta que el archivo parece un mosaico. Un formateador automatico mantiene el archivo uniforme sin importar quien lo toco por ultimo, y hace que la revision de codigo se centre en los cambios reales de estilo en vez del ruido de espacios.
Guarda el archivo formateado como la fuente de verdad. Genera la version minificada para produccion desde el, y nunca edites el archivo minificado directamente. Si alguna vez se hace un arreglo solo para produccion en el archivo minificado, copialo de vuelta a la fuente de inmediato, o la proxima construccion lo borrara en silencio.
Limites que debes recordar
El formateador maneja CSS estandar, incluidas consultas de medios y reglas arroba comunes. Funciones CSS muy nuevas pueden formatearse de forma imperfecta si la version del formateador es mas vieja que la funcion, aunque el resultado sigue siendo valido en la mayoria de casos. La sintaxis de preprocesadores, como anidacion o variables de Sass, no es CSS plano y puede no formatearse bien; para esos archivos, usa un formateador hecho para ese preprocesador.
Por ultimo, recuerda que formatear mejora la legibilidad, no el diseno. Una hoja ordenada puede seguir siendo lenta, demasiado especifica, o dificil de mantener si tiene miles de reglas luchando entre si. Usa el formato como el primer paso de una limpieza, luego simplifica: reduce la especificidad, reutiliza clases, y borra lo que de verdad este muerto, probando la pagina despues de cada paso.
Pingback: CSS Beautifier - Format Stylesheets Cleanly Free Online