Minificador CSS

¿Qué es la minificación de CSS?

La minificación de CSS es el proceso de eliminar todos los caracteres innecesarios de una hoja de estilo sin cambiar su comportamiento. Esto significa suprimir espacios en blanco, saltos de línea, comentarios y sintaxis redundante como puntos y coma finales y comillas innecesarias. El navegador analiza el CSS minificado de forma idéntica al original. El W3C CSS Syntax Module define la gramática; el espacio en blanco entre tokens es opcional salvo cuando separa identificadores. La minificación aprovecha esto colapsando todo hasta el mínimo de caracteres necesarios.

Un minificador CSS online toma tu hoja de estilo formateada y produce una versión compacta optimizada para el tamaño de transferencia. El ahorro típico va del 15% al 40% dependiendo de la cantidad de espacio en blanco y de comentarios que contenga el código fuente. Para una hoja de estilo de 50 KB, eso supone entre 7 y 20 KB menos de bytes enviados por la red en cada carga de página. Combinada con la compresión gzip o Brotli en el servidor, la minificación reduce aún más el tamaño de transferencia final, porque la salida comprimida de un CSS ya minificado es menor que comprimir el original formateado.

La minificación es un paso estándar en los pipelines de compilación frontend. Herramientas como cssnano, clean-css y esbuild ejecutan la minificación como parte del build. Pero durante el desarrollo a menudo necesitas minificar un fragmento concreto para hacer pruebas, incluir un bloque de CSS crítico de forma inline o comprobar cuánto se reduce una hoja de estilo antes de añadirla a la configuración de un bundle. Para eso es útil un minificador CSS en el navegador: pega el CSS, obtén la salida minificada, cópiala y listo.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

¿Por qué usar este minificador CSS?

Pega cualquier CSS y obtén la salida minificada en milisegundos. Sin configurar herramientas de compilación, sin comandos de CLI, sin cuentas.

Casos de uso del minificador CSS

Técnicas de minificación de CSS

Un minificador CSS aplica varias transformaciones para reducir el tamaño del archivo. Cada una apunta a un tipo diferente de redundancia en el código fuente. La tabla a continuación enumera las principales técnicas y su ahorro típico en una hoja de estilo formateada:

Los porcentajes de ahorro varían según la entrada. Los archivos con muchos comentarios se benefician más de la eliminación de comentarios, mientras que el CSS ya compacto obtiene ganancias menores. Los ahorros más fiables provienen de la eliminación de espacios en blanco y la optimización de shorthands. Los minificadores avanzados como cssnano también fusionan selectores duplicados, colapsan propiedades longhand en shorthands (margin-top + margin-right + margin-bottom + margin-left en margin) y eliminan declaraciones sobreescritas.

Minificación frente a compresión gzip

La minificación y la compresión son complementarias, no intercambiables. Operan en capas diferentes y se acumulan una sobre la otra:

Ejemplos de código

Cómo minificar CSS mediante programación en diferentes lenguajes y entornos:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Preguntas frecuentes