compress Minificador / Embellecedor de CSS star

Cómo Funciona

Minificar reduce el tamaño del archivo eliminando todo lo que un analizador automático no necesita pero un lector humano sí querría: comentarios, saltos de línea, sangría y el punto y coma final antes de una llave de cierre. Nada de eso es relevante para cómo el navegador aplica los estilos — una hoja de estilos con cada regla en una sola línea y sin espacios en blanco se comporta idénticamente a una bien formateada, solo que más pequeña y más rápida de descargar. Esto importa en producción porque el CSS bloquea el renderizado de la página hasta que se descarga y se analiza, así que recortar kilobytes del archivo mejora directamente la velocidad de carga, especialmente en conexiones lentas.

Embellecer es la operación inversa, y es genuinamente más difícil: toma CSS comprimido o desordenado y lo vuelve a indentar con una declaración por línea, una regla por bloque, espaciado consistente alrededor de los dos puntos y las llaves. Esto es una especie de ingeniería inversa, porque el formato original — y especialmente cualquier comentario — desaparece en el momento en que un archivo se minifica; solo se puede recuperar el formato estructural (qué selector va con qué declaraciones), no los saltos de línea ni las notas originales del autor. Por ejemplo, .btn{color:red;padding:8px} se convierte en un bloque correctamente indentado con color: red; y padding: 8px; cada uno en su propia línea dentro de .btn { }.

Lo Que Deberías Saber

• Ambas direcciones preservan el comportamiento exactamente. Los selectores, propiedades, valores y el orden de la cascada permanecen intactos — solo cambian los espacios en blanco y los comentarios, así que la especificidad y la herencia funcionan de forma idéntica antes y después.
• Esta es una herramienta ligera basada en expresiones regulares, no un analizador CSS completo (como PostCSS). Maneja correctamente el CSS estándar, pero los valores de contenido con {, } o ; literales dentro de comillas (raro en la práctica, sobre todo en valores content: generados) podrían no formatearse perfectamente.
• La sintaxis de Sass/Less no se procesa. El anidamiento, las variables y los mixins no son CSS válido por sí solos, así que pasan en gran medida sin cambios en lugar de compilarse — igual necesitarás Sass o Less para convertirlos primero en CSS plano.
• Los comentarios son lo único que minificar descarta permanentemente. Si un comentario documenta un truco específico de un navegador o una advertencia de "no eliminar esto", guarda una copia del código fuente sin minificar en algún lugar — la salida comprimida no tiene forma de recuperarlo.

Una comparación concreta: una regla embellecida como .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } se minifica a .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} — notablemente más corta, y en una hoja de estilos completa con docenas de reglas, comentarios y consultas de medios anidadas, ese ahorro suele oscilar entre el 20% y el 40% del tamaño original del archivo.