Cómo funciona el embellecimiento CSS
El embellecedor lee tu hoja de estilos carácter a carácter, realiza un seguimiento del nivel de anidación de cada bloque y lo reemite con espaciado consistente. Nunca cambia lo que hacen los estilos, solo cómo se ven en el archivo.
- Tokenizar. La biblioteca analiza tu entrada en una secuencia de tokens: selectores, nombres de propiedad, valores, reglas at, comentarios y las llaves, dos puntos y puntos y coma que los separan. Las cadenas y los valores url() se reconocen como unidades individuales, de modo que una llave dentro de una propiedad content nunca se confunde con un delimitador de bloque.
- Seguir el anidamiento. Al recorrer la secuencia de tokens, el embellecedor mantiene un nivel de sangría en ejecución. Cualquier llave de apertura aumenta el nivel, ya pertenezca a un bloque de regla, una media query o un bloque de keyframes, y cada llave de cierre lo disminuye. Esa profundidad determina cuántas unidades de sangría preceden a cada línea del resultado.
- Aplicar tus opciones. Tu elección de sangría (2 espacios, 4 espacios o un tabulador) establece el ancho de un nivel. El estilo de llaves decide si una llave de apertura se adhiere al selector que la precede o cae en su propia línea. Los interruptores restantes añaden una línea en blanco entre bloques de reglas y dividen los selectores agrupados en líneas separadas.
- Reemitir. Finalmente, el formateador imprime los tokens con la sangría y los saltos de línea calculados, poniendo una declaración por línea y un espacio después de cada dos puntos. El resultado es la misma hoja de estilos, presentada de manera que un ser humano pueda explorar la cascada.
Por qué embellecer CSS
- Leer hojas de estilos minificadas. El CSS de producción se envía en una línea sin espaciado entre reglas. Embellecer restaura los saltos de línea y la sangría para que puedas encontrar el selector detrás de un error de diseño y ver exactamente qué declaraciones establece, incluso sin un source map.
- Ordenar archivos inconsistentes. Una hoja de estilos que varias personas han tocado deriva hacia sangrías y estilos de llaves mezclados. Una pasada por el embellecedor normaliza todo el archivo a un solo diseño, de modo que el siguiente diff muestra cambios reales en la cascada en lugar de ruido de espacios en blanco.
- Esta herramienta no penaliza tu página. La mayoría de los formateadores en línea cargan toda su biblioteca en el momento en que abres la página. Este carga js-beautify de forma diferida solo cuando haces clic en Embellecer o activas el modo en vivo, por lo que abrir la página cuesta unos pocos kilobytes en lugar de cientos, y la renderización inicial se mantiene rápida.
- Nada sale de tu navegador. El embellecedor se ejecuta completamente en tu dispositivo. Tu CSS nunca se carga en un servidor, lo cual importa cuando la hoja de estilos que inspeccionas pertenece a un cliente, contiene nombres de clases internos o está sujeta a un acuerdo de confidencialidad.
Aplicaciones comunes
Embellecer CSS surge siempre que alguien necesita leer una hoja de estilos que no fue escrita para ser leída.
- Depuración en producción: pega una hoja de estilos minificada extraída de la pestaña Red para encontrar la regla que está anulando el diseño que esperabas.
- Preparación de revisión de código: reformatea la hoja de estilos con sangría inconsistente de un colaborador antes de abrir el pull request para que los revisores vean cambios en la cascada, no desorden de diseño.
- Aprendizaje y auditoría: expande la hoja de estilos de un framework o librería de componentes para estudiar cómo están estructurados sus selectores, media queries y propiedades personalizadas.
Un ejemplo práctico
Toma un one-liner minificado: a{color:red;margin:0}b{padding:0}. Pégalo arriba con sangría de 2 espacios y estilo de llaves Contraer, luego haz clic en Embellecer. Obtienes de vuelta bloques legibles: a { en su propia línea, las declaraciones color: red; y margin: 0; cada una con un nivel más de sangría, la llave de cierre alineada bajo el selector, y la regla b a continuación. Cambia el estilo de llaves a Expandir y cada llave de apertura cae en su propia línea. Cambia la sangría a Tabuladores y cada nivel se desplaza de dos espacios a un carácter de tabulación. Los estilos son idénticos; solo cambia el diseño.
FAQ
¿Esto se ejecuta en mi navegador?
Sí. La biblioteca js-beautify se carga de forma diferida la primera vez que haces clic en Embellecer o activas el modo en vivo, y luego se almacena en caché. Tu CSS nunca abandona la página — no hay llamada al servidor ni carga.
¿Es embellecer lo mismo que desminificar?
Restaura el formato legible —sangría, saltos de línea y espaciado— pero no puede recuperar los comentarios que la minificación eliminó ni recuperar ninguna estructura que nunca estuvo en el archivo. Solo reformatea las declaraciones y selectores presentes.
¿Embellecer cambiará cómo se renderizan mis estilos?
No. El embellecimiento solo añade y elimina espacios en blanco y saltos de línea; la cascada no se toca y la página se renderiza de forma idéntica. El orden de las propiedades, la especificidad y los valores se mantienen exactamente como los escribiste.
¿Qué significan las opciones de estilo de llaves?
Contraer mantiene una llave de apertura en la misma línea que el selector (a {), que es la convención habitual de CSS. Expandir coloca cada llave de apertura en su propia línea bajo el selector. Los interruptores de línea en blanco y un selector por línea controlan el espaciado entre reglas y cómo quedan distribuidos los selectores agrupados como h1, h2, h3.
El embellecimiento CSS en el navegador te da una hoja de estilos legible sin un paso de compilación ni una carga. Pega un archivo minificado o desordenado, elige tu sangría y estilo de llaves, luego copia o descarga el resultado. Nada sale de tu dispositivo, no hay cuenta y la biblioteca solo se carga cuando la pides — así que abrir esta página te cuesta unos pocos kilobytes, no un megabyte.