Tarde o temprano inspeccionas una página y encuentras una hoja de estilos en una sola línea, de miles de caracteres. Un embellecedor la reformatea para que puedas leerla.
Qué hace embellecer
Un embellecedor añade saltos de línea y sangría según la estructura del código:
- En CSS, una declaración por línea, sangrada dentro de cada regla, con una línea en blanco o un salto entre reglas.
- En HTML, las etiquetas anidadas sangradas según la profundidad, con cada elemento de bloque en su propia línea.
El resultado se comporta exactamente igual que el original, porque solo cambiaron los espacios en blanco.
Qué no puede restaurar
- Los comentarios los borró el minificador y no se pueden recuperar.
- La abreviatura y el orden originales pueden diferir de lo que escribió el autor.
- Los nombres de variables y clases siguen siendo los mismos en CSS y HTML, lo que ayuda. En JavaScript minificado, los nombres a menudo se acortan para siempre, lo que lo hace más difícil de leer incluso después de reformatearlo.
Flujo de trabajo típico
- Copia el código minificado de las herramientas de desarrollo del navegador o de un archivo.
- Pégalo en el embellecedor y ajusta la sangría.
- Lee, busca y haz un cambio.
- Si es tu propio proyecto, haz la edición en los archivos fuente y recompila en lugar de editar el archivo minificado.
Mapas de código fuente
Las herramientas de compilación pueden producir un mapa de código fuente, un archivo que vincula el código minificado con los archivos originales y los números de línea. Las herramientas de desarrollo del navegador lo usan para mostrar el código fuente mientras depuras. Prefiere los mapas de código fuente en tus propios proyectos, y usa un embellecedor para código de terceros que no tenga uno.
Revisa las licencias
Leer código está bien, pero copiar la hoja de estilos de otra persona puede no estar permitido. Comprueba la licencia antes de reutilizarla.
Preguntas frecuentes
¿Embellecer cambia el tamaño del archivo? Sí, lo hace mayor, ya que vuelven los espacios en blanco.
¿Arreglará código roto? No, solo cambia el diseño. La sintaxis no válida sigue siéndolo.