Formateador CSS en línea para hojas de estilo legibles

Introducción

El CSS minificado o comprimido a mano es eficiente para que lo descargue un navegador, pero difícil de leer para una persona — todo va pegado, sin saltos de línea, sin sangría y casi siempre sin comentarios. Embellecer hace lo contrario de minificar: toma el CSS en ese estado comprimido y reconstruye los saltos de línea, el espaciado y la sangría que lo vuelven legible otra vez, sin cambiar lo que hace ninguna regla. Esto importa cada vez que es una persona, y no un navegador, quien necesita mirar el CSS de verdad: para aprender de él, revisarlo o encontrar una regla puntual adentro.

Cómo formatea su CSS esta herramienta

Pegar el CSS y hacer clic en Embellecer reconstruye el código con una regla por bloque: cada selector en su propia línea, y debajo sus propiedades con sangría, una por línea. Los valores de las propiedades en sí — colores, unidades, abreviaturas — quedan exactamente como usted los pegó; solo cambian el espaciado y la estructura. Vale conocer dos detalles sobre cómo se tratan los selectores y los valores:

• Los selectores agrupados siguen juntos. Una regla con varios selectores separados por comas, como .card, .card-highlight, .card-featured { ... }, se mantiene en una sola línea de selector, en vez de partirse una por línea como hacen algunos formateadores.
• Los valores que contienen dos puntos se manejan bien. Solo los primeros dos puntos de cada declaración se toman como el separador entre la propiedad y su valor, así que un valor que a su vez contiene dos puntos — una dirección web como background: url(http://example.com/img.png) es el caso más común — no queda cortado en el lugar equivocado.

Los comentarios se eliminan como parte de este proceso, algo que conviene saber si su hoja de estilos incluye un aviso de licencia o de atribución — vea la nota más abajo.

Qué conviene saber antes de usarla

Esta herramienta anda bien con CSS sencillo y plano: una lista lisa de selectores y sus propiedades. Tiene dos limitaciones puntuales que vale conocer antes de pegar código del mundo real:

• Las reglas anidadas no se formatean bien. Si su CSS incluye una consulta @media, un bloque @keyframes o cualquier regla anidada dentro de otro bloque, es probable que la sección de alrededor salga desordenada en vez de prolijamente sangrada. Esta herramienta reconstruye la estructura emparejando llaves de apertura y cierre de a un par por vez, y no lleva la cuenta de qué tan adentro de otro bloque está cada llave, así que una regla anidada dentro de @media termina con su contenido mezclado con el propio bloque @media en lugar de quedar bien anidada. Si su hoja de estilos usa consultas de medios o keyframes, revise con cuidado esa parte de la salida, o embellezca una versión sin las partes anidadas.
• Se eliminan todos los comentarios, sin excepción. A diferencia de CSS Minifier en este sitio, que conserva los comentarios escritos como avisos de licencia o atribución, este embellecedor quita todos los comentarios del código pegado. Si su hoja de estilos incluye un encabezado de licencia que necesita conservar, guarde una copia antes de embellecer.

Ninguna de las dos cosas afecta lo que hace el CSS — las reglas y los valores de fondo no cambian; lo único en juego es cuánta de la estructura queda correctamente reformateada en algo legible.

Cuándo esta es la herramienta adecuada

• Leer el CSS minificado de otra persona para aprender de él. Mirar la hoja de estilos de un sitio real desde las herramientas de desarrollo del navegador suele mostrar CSS comprimido e ilegible — pegarlo acá y embellecerlo hace posible estudiar de verdad cómo está armado un diseño o un componente, un uso genuino de alfabetización digital que va más allá de pasar la herramienta por el código propio.
• Revisar el CSS que entregó un estudiante. El código copiado y pegado entre editores a veces pierde su formato original; embellecerlo antes de leerlo agiliza la corrección y la devolución.
• Depurar un diseño que no funciona. El CSS denso y sin formato cuesta más de recorrer buscando la regla que trae el problema — formatearlo primero suele hacer más fácil dar con la falla real.

Si el CSS con el que trabaja se apoya en consultas @media u otros bloques anidados y necesita un formateo confiable, el formateador integrado de un editor de código le va a servir mejor que esta herramienta — vea la limitación de arriba. Para una hoja de estilos plana, sin reglas anidadas, que cubre buena parte del trabajo inicial de diseño web, esta herramienta es una forma rápida de obtener una salida legible sin instalar nada.

Ejemplo

Una estudiante encuentra interesante el CSS de un sitio de plantillas y quiere entender cómo está armado un diseño de tarjetas. La hoja de estilos en vivo está minificada en una sola línea densa, así que antes de poder leerla la pega en esta herramienta y la embellece. Las reglas se separan en una estructura legible, y eso permite ver qué selector controla cada parte del diseño, cómo se fija el espaciado con margin y padding, y qué colores se repiten a lo largo de la composición. Si la hoja copiada incluye consultas @media para el comportamiento adaptable, esa sección necesita una segunda mirada después — vea «Qué conviene saber antes de usarla» más arriba.

Preguntas frecuentes

¿Embellecer cambia lo que hace el CSS?

No. Solo cambian el espaciado, los saltos de línea y la sangría — los selectores, las propiedades y los valores quedan igual.

¿Qué pasa con los comentarios de mi CSS?

Se eliminan. Esta herramienta no conserva los comentarios de licencia o atribución como sí lo hace CSS Minifier — guarde una copia antes si necesita conservar alguno.

¿Va a formatear bien el CSS con consultas de medios?

No de forma confiable. Las reglas anidadas dentro de @media, @keyframes o bloques parecidos pueden salir desordenadas — revise esa parte de la salida, o use el formateador de un editor de código para hojas de estilo que se apoyan mucho en el anidamiento.

¿Puedo embellecer CSS minificado copiado de otro sitio?

Sí — es un uso común y legítimo para aprender cómo está construida una página. Tenga presente los términos del sitio de origen si piensa reutilizar el código en vez de solamente estudiarlo.

¿Se guarda mi código en algún lado?

No. El CSS pegado se procesa para producir el resultado formateado y no se almacena después; solo queda registrado que la herramienta se usó, no el código en sí.

¿Los selectores agrupados se van a partir en líneas separadas?

No. Una regla escrita con varios selectores separados por comas se mantiene en una línea de selector, tal como fue escrita originalmente.

¿Qué herramientas relacionadas puedo usar?

Use CSS Minifier para comprimir el CSS de vuelta para producción, o JavaScript Beautifier y HTML Beauty para otras tareas de formateo de código.