Minificador de CSS

Cómo minificar CSS

1. Pega tu hoja de estilos en el primer cuadro. El resultado y el porcentaje de ahorro se actualizan mientras escribes.
2. Decide si conservas los comentarios que empiezan por /*!: es la convención para avisos de licencia que muchas licencias obligan a mantener.
3. Copia el resultado o descárgalo como .min.css. Guarda siempre el original legible: el minificado es para producción, no para editar.

Qué hace exactamente

• Elimina los comentarios /* … */ (salvo los de licencia si lo eliges).
• Reduce cualquier secuencia de espacios, tabuladores y saltos de línea a un único espacio, y lo quita junto a { } ; , > ~ y después de los dos puntos.
• Quita el punto y coma antes de } y los ;; repetidos.
• Opcionalmente quita el cero inicial de los decimales: 0.25s → .25s.

Lo que no toca, a propósito

• Cadenas entre comillas (content, font-family, grid-template-areas): sus espacios son significativos.
• url(), con o sin comillas.
• Los espacios alrededor de + y -: en calc(100% - 2rem) son obligatorios; sin ellos la regla deja de funcionar.
• El espacio antes de : en selectores: div :first-child (cualquier primer hijo dentro de un div) no significa lo mismo que div:first-child.
• No reordena reglas, no fusiona selectores ni cambia colores o unidades. Esas optimizaciones avanzadas pueden alterar la cascada; para eso existen herramientas de compilación como cssnano o Lightning CSS.

Ejemplo

Esta regla de 70 bytes:

.aviso  >  p {
  margin : 0 0 1em ;
  transition: opacity 0.3s ease;
}

queda en 52 bytes, un 25,7 % menos: .aviso>p{margin:0 0 1em;transition:opacity .3s ease}. En hojas de estilo reales con muchos comentarios el ahorro suele estar entre el 15 y el 40 %, según lo comentado e indentado que esté el original.

¿Merece la pena minificar?

El CSS bloquea el renderizado: el navegador no pinta la página hasta descargarlo y procesarlo, así que cada kilobyte cuenta para la primera visualización. Pero ten en cuenta que los servidores comprimen el texto con gzip o Brotli, que ya elimina gran parte de la redundancia de los espacios; tras la compresión, minificar suele ahorrar bastante menos que el porcentaje que ves aquí. Sigue mereciendo la pena porque es gratis y reduce también el trabajo del analizador.

Más eficaz aún es no enviar CSS que no se usa y cargar solo el crítico al principio. Para el HTML de la página tienes el minificador de HTML; si estás convirtiendo medidas, el conversor de px a rem y el conversor de colores te ayudan a escribir CSS más consistente, y el generador de sombras CSS te da reglas listas para pegar.

El código se procesa en tu navegador; no se envía a ningún servidor.