¿Qué es Minificador CSS?

CSS Minifier comprime tu CSS eliminando espacios en blanco, comentarios y sintaxis redundante. Los archivos más pequeños se descargan más rápido y suben tu puntuación de PageSpeed.

Por dentro el minificador ejecuta el algoritmo de CSSO, que va más allá de quitar espacios. Fusiona reglas contiguas con el mismo selector, elimina redundancias en notación corta (margin: 10px 10px 10px 10px se convierte en margin: 10px), quita prefijos de proveedor que ya no necesitas y acorta colores hex de seis dígitos a tres cuando es posible.

Cómo usar

1. Pega tu código CSS en el área de entrada, sube un archivo .css o carga una hoja de estilos directamente desde una URL.
2. Haz clic en minificar para comprimir — la herramienta elimina comentarios, espacios en blanco y acorta valores.
3. Copia la salida minificada o descárgala como archivo .css. Consulta el porcentaje de compresión mostrado.

Cuándo usar

• Publicar la hoja de estilos de un sitio estático que no pasa por una build.
• Comparar dos versiones de un CSS para ver cuánto código repetido se está colando.
• Apurar bytes cuando incrustas CSS crítico dentro del head de un documento HTML.

Resultado

Una hoja de estilos de 24KB con comentarios y formato se minifica a 16KB — una reducción del 33% que ahorra 50ms de tiempo de carga en conexiones 3G.

Preguntas frecuentes

¿El CSS minificado se renderiza distinto del original?

Los navegadores procesan CSS minificado y formateado de forma idéntica. La cascada, la especificidad y los estilos calculados no cambian. Lo único que varía es que el archivo pesa menos en disco y en red.

¿Debo también comprimir con gzip?

Sí. Gzip sobre la minificación reduce otro 60-80%. La mayoría de CDN aplica gzip automáticamente. Aun así, minificar primero ayuda porque gzip comprime patrones repetidos, y el CSS minificado los tiene en mayor cantidad.

¿La minificación rompe mis source maps?

Esta herramienta no genera source maps porque trabaja con una sola cadena de CSS, no con un grafo de build. Si necesitas mapas, usa un bundler como esbuild o Vite que emita el .css.map junto al CSS minificado.

¿Por qué mi archivo minificado conserva algunos espacios?

CSS mantiene espacios dentro de cadenas, entre partes de un selector (.a .b no es lo mismo que .a.b) y dentro de expresiones calc(). El minificador solo retira el espacio sin valor semántico y deja el resto.

¿Es seguro minificar CSS con propiedades personalizadas (variables CSS)?

Sí. Los nombres y los valores de las propiedades personalizadas se mantienen. El minificador solo aplana el formato a su alrededor. Variables como --brand-color sobreviven tal cual las escribiste y siguen funcionando dentro de var().

Herramientas relacionadas