Minificador y Embellecedor CSS
Comprimir CSS para producción o Embellecer para legibilidad (100% Lado del Cliente)
Documentación del Compresor y Formateador CSS
¿Qué es esta herramienta?
La minificación CSS elimina caracteres sintácticamente innecesarios de las hojas de estilo sin alterar su comportamiento: espacios entre reglas, saltos de línea, comentarios CSS (/* ... */), punto y coma redundante antes de llaves de cierre. El formateador realiza la operación inversa con indentación y saltos de línea consistentes.
Características principales
- Eliminación de espacios y comentarios: elimina todos los espacios entre reglas, saltos de línea y comentarios /* */. Preserva literales de cadena y valores url(). Retiene /*! ... */ con opción habilitada.
- Compactación de selectores y declaraciones: colapsa múltiples espacios en selectores, elimina el último punto y coma antes de }, normaliza 0px→0 y 0.5→.5.
- Indentación configurable: 2 espacios, 4 espacios o tabulación; una regla por línea; preserva @media, @keyframes y estructuras anidadas.
- Soporte custom properties: no compacta expresiones var() ni espacios en calc() (puede romper el parsing en algunos navegadores).
- Visualización del cambio de tamaño: bytes originales, bytes minificados y porcentaje de compresión junto al resultado.
Casos de uso comunes
- Pipeline de build: integración en Webpack (css-minimizer-webpack-plugin), Vite (Lightning CSS integrado) o Gulp (gulp-clean-css).
- Depuración de CSS minificado: beautify de Bootstrap 5 o salida Tailwind para inspeccionar estructura de reglas.
- Limpieza de hojas de estilo heredadas: reformatear CSS con indentación inconsistente antes de refactorizar.
- Reducción payload CDN: servir CSS minificado reduce bytes transferidos y mejora LCP; reducción típica 20-50%.
Cómo esta herramienta procesa CSS
Eliminación de espacios en blanco
Elimina todos los espacios, saltos de línea y tabulaciones innecesarios. Las reglas CSS se condensan en una sola línea sin afectar la funcionalidad. Ejemplo: `.btn { color: red; }` se convierte en `.btn{color:red;}`
Eliminación de comentarios
Elimina todos los comentarios CSS (/* ... */) a menos que la opción 'Preservar comentarios' esté habilitada. Los comentarios de licencia importantes que usan la sintaxis /*! ... */ generalmente se preservan por la mayoría de los minificadores.
Eliminación de caracteres redundantes
Elimina puntos y comas innecesarios (última propiedad en una regla), espacios alrededor de operadores y ceros extras (0.5 → .5). Acorta códigos de color (#ffffff → #fff).
Optimización de propiedades
Elimina espacios alrededor de llaves, dos puntos y comas. Ejemplo: `margin: 10px 20px;` se convierte en `margin:10px 20px;`. Nota: los espacios se preservan en calc() y otras funciones donde se requieren.
Impacto en el tamaño del archivo
20-50% de reducción para CSS escrito a mano. 5-15% para salidas de framework. 40-60% para hojas con muchos comentarios. Gzip adicional: 70-80% de reducción de transferencia.
| Escenario | Original | Minificado | Reducción | Comprimido |
|---|---|---|---|---|
| CSS bien formateado con comentarios | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% total) |
| CSS ya compacto con pocos comentarios | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% total) |
| CSS de documentación muy comentado | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% total) |
Herramientas Relacionadas
Compresor y Formateador HTML
Comprima o formatee código HTML, elimine espacios en blanco y comentarios para optimizar el tamaño del archivo, o formatee código para legibilidad
Compresor y Formateador JavaScript
Comprima o formatee código JavaScript, elimine espacios en blanco y comentarios para optimizar el tamaño del archivo, o formatee código para legibilidad
Selector de color
Convertir colores entre formatos HEX, RGB, HSL, CMYK, YCbCr, Lab, generar esquemas de colores, verificar contraste WCAG
Generador de paleta
Generador profesional de paletas de colores con mezcla de colores, creación de degradados, esquemas de colores y exportación a CSS/SCSS/JSON
Convertidor de Imagen a Base64
Convertir imágenes a codificación Base64, soporta formatos PNG, JPG, GIF, SVG, WebP, generar Data URI y fondos CSS
Verificador de Diferencias de Texto
Comparar diferencias entre dos textos o archivos con vista lado a lado resaltada