CSS Minifier — Minificador de CSS

Qué hace el minificador de CSS

Esta herramienta reduce hojas de estilo con CSSO (CSS Optimizer), un minificador que entiende el CSS en lugar de tratarlo como texto plano. En la primera pasada realiza limpiezas seguras: elimina espacios en blanco y comentarios, acorta los colores (#ff0000 pasa a ser red y #ffffff pasa a ser #fff), quita las unidades de los valores cero, suprime comillas y puntos y coma redundantes y escribe los números en su forma más corta. El resultado es un CSS exactamente equivalente y notablemente más pequeño.

Con restructure (reestructurar) activado, CSSO va más allá y optimiza la estructura de la hoja de estilo. Las reglas con el mismo selector se fusionan, los selectores que comparten declaraciones idénticas se agrupan, las propiedades que se sobrescriben más adelante en la misma regla se descartan y las declaraciones largas, como márgenes separados, pueden combinarse en una abreviatura. CSSO respeta cuidadosamente la cascada: solo mueve o fusiona reglas cuando hacerlo no puede cambiar qué declaración prevalece.

Cómo interpretar los resultados

Las insignias muestran el tamaño UTF-8 de la entrada y la salida, además del porcentaje ahorrado. El CSS escrito a mano, con comentarios y sangría, suele reducirse entre un 20 y un 50%. La salida de frameworks que ya es compacta ganará menos, mientras que las hojas de estilo que repiten las mismas declaraciones en muchos selectores son las que más se benefician de la reestructuración. Los servidores suelen aplicar además gzip o Brotli, así que la minificación y la compresión se complementan en lugar de competir.

Privado y seguro

El minificador se ejecuta por completo en tu navegador: no se sube, registra ni almacena nada. Eso lo hace práctico para CSS crítico en línea, plantillas de correo electrónico, widgets incrustados o arreglos rápidos en un equipo sin tus herramientas de compilación habituales. Conserva los comentarios /*! ... */ si tu hoja de estilo incluye licencias de terceros que deben mantenerse. Para sitios en producción, añade un minificador a tu proceso de compilación para que cada despliegue se optimice automáticamente, y revisa siempre el resultado visualmente cuando tu CSS dependa de hacks de navegador o de una sintaxis poco habitual.