Minifica o formatea CSS al instante con estadísticas de reducción
También podrías necesitar
El CSS minificado elimina todos los caracteres que no afectan la funcionalidad del código: espacios en blanco, saltos de línea, comentarios, el último punto y coma de cada bloque y espacios alrededor de selectores y propiedades. El resultado es funcionalmente idéntico al original pero puede ser entre un 10% y un 40% más pequeño, lo que se traduce directamente en menor tiempo de carga y mejor Core Web Vitals (LCP, FCP). El beautifier hace el proceso inverso: toma CSS comprimido o mal indentado y lo reestructura con indentación consistente, una propiedad por línea y espaciado estándar, facilitando la lectura y el debugging. Esta herramienta procesa CSS directamente en el navegador sin enviar código a ningún servidor — útil para archivos CSS que pueden contener estilos propietarios o confidenciales. Las estadísticas de reducción te muestran el tamaño antes y después y el porcentaje de ahorro.
¿Cuánto espacio ahorra minificar CSS?
Depende del CSS. Archivos con muchos comentarios y espaciado generoso pueden reducirse un 30-40%. CSS ya relativamente compacto puede reducirse un 10-15%. El ahorro real en producción depende también de si usas compresión HTTP (gzip/brotli): con compresión activada, la diferencia entre minificado y no minificado se reduce porque el algoritmo de compresión ya elimina mucha redundancia. Aun así, servir CSS minificado es la práctica estándar.
¿Se elimina el último punto y coma de cada bloque?
Sí. En CSS, el punto y coma después de la última propiedad de un bloque es opcional (la llave de cierre implica el fin de la declaración). El minificador lo elimina para ahorrar un byte por bloque. El beautifier lo preserva en el output formateado porque la convención de estilo moderno (y linters como stylelint) prefiere mantenerlo para evitar errores al añadir propiedades al final del bloque.
¿Se procesan también @media queries y @keyframes?
Sí. El minificador maneja correctamente las reglas at-rule anidadas: @media queries, @keyframes, @supports, @layer y similares se minifican preservando su estructura. Los @keyframes conservan los porcentajes de los stops (from/to/0%/100%) correctamente. Los @media queries mantienen sus condiciones intactas.
¿Debería minificar CSS manualmente o usar el build process?
En proyectos modernos, el build process (Webpack, Vite, Parcel) minifica automáticamente el CSS en la fase de build. Usa esta herramienta para: CSS en CDN o de terceros que quieres incluir de forma más ligera, snippets CSS que vas a pegar en línea, debugging de CSS minificado que necesitas leer, o proyectos sin build process (HTML estático, prototipos).
¿Los comentarios se eliminan en el minificador?
Sí, todos los comentarios CSS (/* ... */) se eliminan en el proceso de minificación. Si necesitas preservar comentarios especiales como licencias (!important comments: /*!), necesitarías una herramienta más avanzada como cssnano con la configuración correspondiente. Esta herramienta aplica minificación simple sin preservar comentarios de ningún tipo.