Minificar CSS para Acelerar tu Sitio
Elimina comentarios y espacios innecesarios de tu CSS para reducir el tamaño del archivo al instante.
Tu hoja de estilos se queda en tu equipo
Nada que borrar después
Seguro para interfaces no publicadas
Funciona en todo navegador moderno
Cómo funciona
- 1
Pega tu CSS
Una hoja de estilos, los estilos de un componente o un bloque que quieras más pequeño.
- 2
Comprueba los tamaños
Compara minificado y comprimido, y lee los avisos antes de reemplazar el original.
- 3
Copia la salida
Llévala a una salida de compilación, un bloque `<style>` o una plantilla.
Por qué usar esta herramienta
Orden de declaraciones preservado
No se reordena nada, porque la cascada rompe empates por posición y mover una regla cambia lo que se renderiza.
Fallbacks intactos
Una propiedad declarada dos veces suele ser un fallback deliberado para navegadores viejos, no duplicación que borrar.
Sin fusión insegura de atajos
Convertir propiedades largas en un atajo reinicia los lados que no mencionaste, así que no se hace en silencio.
Tamaño comprimido mostrado
La cifra minificada junto a la de gzip, porque solo la segunda es la que descarga el navegador.
Se analiza donde le corresponde
Un navegador ya es un motor de CSS, así que no hace falta ninguna petición y el archivo se queda en la página.
Sin límites y sin registro
Úsalo sobre una sola regla o sobre la compilación de un framework, tantas veces como quieras.
El orden es significado, y eso limita lo que un minificador puede hacer sin riesgo
CSS resuelve las declaraciones en conflicto primero por especificidad y después por orden de documento: cuando dos reglas tienen el mismo peso, gana la escrita más tarde. Eso convierte la posición en parte del significado de una hoja de estilos, y es la razón de que optimizar agresivamente sea más arriesgado aquí que en la mayoría de lenguajes. Una herramienta que agrupe todas las reglas con el mismo selector, u ordene declaraciones para comprimir mejor, o fusione dos bloques que casualmente declaran las mismas propiedades, puede producir un archivo más pequeño byte a byte y distinto visualmente, porque una regla que antes iba última ya no lo va. Las reducciones siempre seguras son las que no mueven nada: quitar espacios, quitar comentarios y acortar valores cuyo significado es fijo. Todo lo que reordena necesita entender tu cascada completa, y una herramienta a nivel de texto no lo hace.
La misma propiedad dos veces suele ser un fallback, no un error
Este es el caso concreto en que «quita el duplicado» rompe una página. Declarar una propiedad dos veces en el mismo bloque es la forma estándar de dar soporte a navegadores antiguos: `color: #ccc` seguido de `color: rgba(0, 0, 0, .5)` significa que el navegador que entiende la segunda la usa y el que no cae de vuelta en la primera, porque una declaración no interpretable se descarta en lugar de ser fatal. El mismo patrón cubre `display: -webkit-box` antes de `display: flex`, un ancho en píxeles antes de un ancho con `calc()` y un color plano antes de un degradado. Un minificador que ve dos declaraciones de una propiedad y guarda solo la última ha eliminado el soporte; el que guarda solo la primera ha eliminado la función. Los dos se equivocan, y el comportamiento correcto es dejar la pareja en paz.
Fusionar propiedades largas en un atajo reinicia lo que no mencionaste
Es la trampa de corrección más sutil al optimizar CSS. Si una regla fija `margin-top` y `margin-left`, unirlas en una sola declaración `margin` no deja los otros dos lados como estaban: un atajo fija todas las propiedades de su grupo, así que los lados no mencionados se reinician a sus valores iniciales, descartando lo heredado o lo que fijó una regla anterior. `background` es peor, porque reinicia una lista larga que incluye `background-size` y `background-position`, así que una fusión puede deshacer en silencio un `background-size: cover` declarado en otro sitio. `font` se comporta igual con `line-height`. El ahorro de estas fusiones es pequeño y el fallo es una maquetación que se ve bien en el archivo y mal en el navegador, y por eso esta herramienta no las hace.
La gran ganancia son las reglas sin usar, y es más difícil de lo que parece
Minificar una hoja de estilos recorta quizá una quinta parte. Quitar las reglas que una página nunca usa puede recortar un noventa por ciento, porque un framework de propósito general envía estilos para cada componente y cada variante mientras una página dada usa un puñado. Ahí está el tamaño real, y hacerlo con seguridad es genuinamente difícil por una razón propia de CSS. Una herramienta de purga funciona escaneando tus plantillas y tu código en busca de nombres de clase y conservando las reglas que coinciden. No puede ver un nombre de clase montado en ejecución, así que `"btn-" + variant` no le parece nada, y la regla de `btn-danger` se borra mientras el código que la necesita sigue ejecutándose. Todo lo construido dinámicamente, inyectado por un widget de terceros o añadido por JavaScript tras la carga debe listarse como excepción, y esa lista es lo que convierte la purga en un proyecto y no en un interruptor.
El CSS bloquea el renderizado, así que su tamaño cuesta otra cosa
Por qué importa el tamaño no es lo mismo en CSS que en scripts. Un navegador no pintará contenido que una hoja pendiente pudiera reestilizar, así que una hoja en la cabecera bloquea el renderizado: hasta que llega y se analiza, la página sigue en blanco. Eso hace que el coste del peso del CSS caiga de lleno en el primer pintado, la parte de la carga que los usuarios más notan, y es el argumento más fuerte para mantener pequeña la hoja crítica. También explica por qué el consejo estándar es incrustar la poca CSS necesaria para el área visible y cargar el resto de forma asíncrona: un cambio estructural que ayuda mucho más que la minificación. Si solo puedes hacer una cosa, dividir la hoja gana a comprimirla.
Por qué minificar en local importa con este tipo de archivo
Una hoja de estilos es menos obviamente confidencial que el código de aplicación y describe más de lo que la gente nota. Los nombres de clase mapean tu interfaz: nombran componentes que no se han publicado, variantes de un experimento aún en marcha, paneles que solo ven administradores y funciones detrás de una bandera. Los comentarios en CSS son sinceros de un modo que no lo son en otras partes: un nombre de cliente, una nota sobre qué navegador se rompió, un recordatorio de que un valor es un apaño por un fallo de una versión concreta. Pegar una hoja de producción en un minificador alojado entrega todo eso por una reducción de tamaño disponible en local. Esta herramienta procesa el archivo en la página y no transmite nada, y puedes comprobarlo en la pestaña Red de las herramientas de desarrollo.
Errores comunes que conviene evitar
- Quitar una propiedad declarada dos veces en un bloque. Eso es casi siempre un fallback deliberado para navegadores antiguos: guardar solo una de las dos elimina el soporte o la función.
- Fusionar propiedades largas en un atajo. Un atajo fija todas las propiedades de su grupo, así que los lados no mencionados se reinician a sus valores iniciales en vez de quedarse quietos.
- Dejar que una herramienta reordene o agrupe reglas para comprimir mejor. La cascada rompe empates por orden de documento, así que un archivo más pequeño puede renderizar distinto.
- Esperar que la minificación resuelva el tamaño de la hoja. Las reglas sin usar suelen ser el bulto; la minificación recorta una quinta parte de lo que recortaría una pasada de CSS sin usar.
- Purgar CSS sin usar sin listar nombres de clase dinámicos. Un nombre montado como `"btn-" + variant` es invisible para un escáner, así que su regla se borra mientras el código sigue corriendo.
Comparativa
| Aspecto | Esta herramienta | Minificadores online | Una tubería de compilación |
|---|---|---|---|
| Hoja enviada a un servidor | Nunca | Normalmente sí | No |
| Preserva el orden de declaraciones | Siempre | Normalmente | Normalmente |
| Mantiene fallbacks de navegador | Sí | Varía | Configurable |
| Elimina reglas sin usar | No | No | Con un paso de purga |
| Tamaño comprimido mostrado | Sí | Rara vez | Con un complemento |
| Precio | Gratis | Gratis / planes de pago | Gratis |
Características
Eliminación de espacios y comentarios
Se descarta todo lo que el analizador ignora, incluidas las líneas en blanco que agrupan tus reglas.
Acortado seguro de valores
Colores reducidos a su forma equivalente más corta y unidades cero recortadas, donde el significado no puede cambiar.
Seguro para el orden por diseño
Las reglas mantienen su posición, así que especificidad y orden de origen siguen resolviéndose igual.
Ambos tamaños informados
Bruto y comprimido, ya que la compresión colapsa por sí sola casi todo lo que quita la minificación.
Sintaxis moderna entendida
Propiedades personalizadas, anidamiento, consultas de contenedor y capas pasan sin destrozarse.
Aguanta hojas grandes
La compilación de un framework entero se minifica sin subida ni tope de tamaño.
Nada que instalar
Sin herramienta de compilación, sin entorno de ejecución, sin dependencias: funciona en la página web.
Listo para árabe y RTL
Interfaz completa en ocho idiomas, incluido el árabe de derecha a izquierda.
Seguro por defecto
Servido por HTTPS, sin rastreo de contenido ni subida a terceros.
Quién la usa
Desarrolladores front-end
Reducir una hoja de estilos que no pasa por un paso de compilación.
Ingenieros de rendimiento web
Reducir la hoja que bloquea el renderizado y retiene el primer pintado.
Desarrolladores de email
Compactar estilos que deben incrustarse en una plantilla con límite de tamaño.
Quien incrusta un bloque de estilos
Dejar los estilos de un componente lo bastante pequeños para la cabecera de una página.
Preguntas Frecuentes
No. Todo se ejecuta localmente en tu navegador — tu texto nunca se sube, guarda ni comparte.
Sí — totalmente gratis, sin cuenta y sin límites.