Minificador de CSS
Minifica CSS en tu navegador con csso: quita espacios y comentarios, acorta valores y fusiona reglas repetidas sin alterar la cascada. Conserva /*! licencias */ y calc(). Sin subir nada.
798 vistas · 26 usos
Qué hace esta herramienta
Pegas tu CSS y devuelve la versión minificada: sin espacios, saltos de línea ni comentarios, con los valores acortados y las reglas repetidas fusionadas. Te dice cuánto pesaba, cuánto pesa ahora y el ahorro en porcentaje, y lo copias con un clic.
La minificación ocurre en tu navegador, con el motor csso cargado bajo demanda; el CSS no se sube a ningún servidor. Sirve igual para una hoja de 200 líneas que para la de un tema entero.
Cómo usarla
- Pega el CSS en el campo de entrada.
- Pulsa Minificar CSS.
- Copia el resultado con el botón o selecciónalo del cuadro.
No hay opciones porque no hacen falta: el motor aplica siempre el conjunto de transformaciones seguras. Si algo te sorprende del resultado, más abajo está lo que hace y lo que no.
Qué cambia exactamente (y por qué no rompe nada)
Un minificador de CSS hace dos tipos de trabajo. El léxico es el obvio: quita espacios, saltos de línea, el último punto y coma de cada bloque y los comentarios. El estructural, que es lo que distingue a csso de un simple «quitar espacios», reescribe el CSS en una forma equivalente pero más corta:
| Antes | Después | Por qué es equivalente |
|---|---|---|
margin: 0px 0px 0px 0px | margin:0 | El cero no lleva unidad y los cuatro lados iguales se abrevian |
color: #ffffff | color:#fff | Forma corta del hexadecimal |
font-weight: bold | font-weight:700 | Mismo valor, menos letras |
.a{color:red}.b{color:red} | .a,.b{color:red} | Dos reglas con la misma declaración se fusionan |
.a{color:red}.a{margin:0} | .a{color:red;margin:0} | Dos bloques del mismo selector se juntan |
0.5s | .5s | El cero inicial sobra |
Las fusiones solo se hacen cuando no cambian el orden en cascada: si entre dos reglas del mismo selector hay una tercera que podría sobrescribirlas, se dejan separadas. Es la parte del motor que más pruebas tiene y la razón de usar csso en lugar de una expresión regular.
Lo que se conserva a propósito
- Los comentarios de licencia que empiezan por
/*!se mantienen. Es la convención que usan Bootstrap, Normalize y casi todas las bibliotecas; si quieres que un comentario sobreviva, ponle la exclamación. - Los hacks de navegador antiguos (
*zoom,_height) se dejan tal cual. - Las variables CSS (
--color-primario) no se tocan: el motor no puede saber qué valor tendrán en tiempo de ejecución, así que ni las acorta ni las elimina aunque parezcan sin uso. calc(): se conservan los espacios alrededor de+y-dentro de la función. Sin ellos,calc(100%-20px)deja de ser una resta y se convierte en un valor inválido; es el error clásico de los minificadores caseros.
Cuánto se ahorra de verdad
Con un CSS escrito a mano, entre un 20 y un 40 % del tamaño; con uno ya generado por Sass o Tailwind, menos, porque ya sale compacto. Pero el número que importa no es ese: los servidores comprimen con gzip o Brotli antes de enviar, y sobre texto ya comprimido la minificación aporta bastante menos de lo que dice el porcentaje de arriba. Minificar sigue valiendo la pena por dos razones que la compresión no cubre: el navegador analiza menos bytes al construir el CSSOM, y las reglas fusionadas son menos reglas que evaluar en cada cambio de estilo.
Cuándo minificar aquí y cuándo no
Esta herramienta es para el CSS suelto: la hoja de un sitio estático, el bloque <style> de un correo, el CSS crítico que vas a poner en línea en el <head>, o para ver qué hace un minificador con tu código antes de meterlo en el build. Si tienes un proceso de construcción (Vite, Astro, webpack, Laravel Mix), la minificación ya la hace él en producción y no hay que hacerla dos veces: minificar el código fuente te deja sin poder leerlo y no ahorra nada al final.
Para el camino inverso, cuando tienes un CSS minificado y necesitas leerlo, está el embellecedor de CSS.
Reseñas y valoraciones
Aún no hay reseñas. ¡Sé la primera persona en opinar!
Guías relacionadas
Tutoriales del blog donde esta herramienta resulta útil.
Herramientas relacionadas
Otras del catálogo que se usan bien junto a esta.