Minificador de CSS

Eliminar espacios en blanco y comentarios es la parte obvia y fácil de la minificación — todo minificador lo hace, y por sí sola es poco más que un buscar y reemplazar. Lo que separa a un minificador de CSS que realmente entiende el lenguaje de una simple eliminación de espacios en blanco es todo lo que requiere entender de verdad la hoja de estilo: la compresión de valores abreviados, donde un color escrito como `#ffffff` se convierte en `#fff` y se recortan las unidades cero redundantes, y la fusión de reglas duplicadas o solapadas, donde dos reglas que terminan aplicando las mismas declaraciones se combinan en una sola. Ambas requieren analizar primero el CSS en una estructura real — saber qué selector se aplica a qué declaraciones, y qué valores son equivalentes —, que es justo por lo que csso construye un árbol de sintaxis real en lugar de emparejar patrones de texto, la misma razón por la que un analizador real se gana su lugar frente a un simple pase de expresiones regulares.

Las herramientas de compilación modernas minifican su salida de CSS automáticamente como parte de una compilación de producción, así que para cualquiera que trabaje dentro de un proyecto empaquetado, la minificación ya ocurre de forma invisible cada vez que compila. Una herramienta independiente como esta cubre lo que queda fuera de ese pipeline: un CMS o plataforma sin ningún paso de compilación, un fragmento puntual que necesita encajar en algún sitio con restricción de tamaño, o simplemente comprobar cuánto se reduciría realmente una hoja de estilo determinada antes de decidir si vale la pena montar herramientas para ello. Para un solo archivo necesario una vez, pegarlo aquí y copiar el resultado es el camino más rápido a la misma salida que produciría un bundler.

Un minificador que entiende CSS es deliberadamente conservador sobre lo que fusiona o reescribe: las propiedades personalizadas (variables CSS), las media queries, las animaciones keyframe y las declaraciones con prefijo de proveedor se conservan exactamente tal como se escribieron, porque colapsarlas de forma incorrecta podría cambiar silenciosamente cómo se renderiza una página en algunos navegadores o tamaños de pantalla, en lugar de solo cómo se ve el código fuente. Las optimizaciones que sí es seguro hacer automáticamente — espacios en blanco, comentarios, valores abreviados, reglas genuinamente duplicadas — son las que no tienen ningún efecto posible sobre la página renderizada, que es todo el principio de diseño detrás de usar un analizador real en lugar de un enfoque de buscar y reemplazar más torpe y arriesgado.