Softonic

Minificador de CSS

Paso 1 / 3
Siguiente

Un archivo CSS minificado carga notablemente más rápido que su versión formateada, y la diferencia se acumula en cada carga de página. Este minificador elimina espacios en blanco y comentarios y suprime los puntos y coma finales, sin cambiar la cascada ni el efecto de ninguna regla. La salida es siempre CSS válido que los navegadores analizan de manera idéntica al original.

Cómo minificar CSS

  1. 1

    Pega el CSS

    Cualquier CSS, escrito a mano, compilado con Sass, bloques de estilo en línea.

  2. 2

    Minificar

    Pulsa "Minify CSS" para eliminar comentarios, espacios en blanco y puntos y coma finales de una sola pasada.

  3. 3

    Comprueba los ahorros

    Los ahorros en bytes se muestran junto a la salida comprimida.

  4. 4

    Copia el resultado

    Copia el CSS minificado en tu paquete de producción o guárdalo como `.min.css`.

Lo que hace el minificador

Transformaciones (nunca cambian el comportamiento):

  • Eliminar comentarios (todos, incluidos los bloques /*! de licencia).
  • Eliminar espacios en blanco innecesarios (entre selectores, declaraciones, llaves).
  • Eliminar punto y coma finales antes de llaves de cierre.
  • Colapsar reglas de varias líneas en una sola línea.

Eso es todo lo que hace, y por eso la salida se comporta exactamente igual que el original: cada selector, propiedad y valor queda tal como lo escribiste.

Ahorros típicos

Fuente Tamaño original Tamaño minificado Ahorros
CSS escrito a mano formateado 20 KB 12 KB 40%
Compilado con Sass, modo dev 45 KB 25 KB 44%
Ya minificado + gzip 10 KB 10 KB 0%

Además de la minificación, la compresión gzip en el servidor añade otro 60-80% de ahorro porque CSS es altamente redundante. Ambos se acumulan; siempre haz ambos.

Lo que la minificación no hace

  • Eliminar CSS no utilizado. Eso es territorio de tree-shaking / PurgeCSS, que requiere analizar tu HTML o componentes.
  • Acortar colores hexadecimales, colapsar unidades cero o fusionar declaraciones. Esas transformaciones agresivas son trabajo de cssnano, esbuild o Lightning CSS, no de esta herramienta.
  • Fusionar selectores duplicados en uno. Arriesgado porque el orden de origen afecta la cascada; algunos minificadores lo intentan, la mayoría lo omite.
  • Renombrar clases. Eso es CSS-in-JS o CSS Modules, no minificación.
  • Incluir CSS crítico en línea. Ese es un paso de construcción separado.

Preservando comentarios de licencia

Muchos minificadores preservan comentarios que comienzan con /*!, utilizados para encabezados de licencia:

/*! Bootstrap v5.3 · Licencia MIT · https://github.com/twbs/bootstrap */

Esta herramienta elimina todos los comentarios. Si tu CSS lleva encabezados de licencia, vuelve a añadirlos después de minificar o usa una herramienta de construcción con opción de conservar licencias, como cssnano o esbuild.

Mapas de origen

Para depuración en producción, las herramientas de construcción generan un mapa de origen junto con la salida minificada:

styles.min.css
styles.min.css.map

Las herramientas de desarrollo pueden leer el mapa y mostrarte los números de línea originales formateados cuando inspeccionas un elemento. Esta herramienta no genera mapas de origen.

Minificación de CSS en un pipeline de construcción

  • Vite, Webpack, Parcel: manejan esto automáticamente en construcciones de producción.
  • PostCSS con cssnano: el minificador estándar independiente.
  • esbuild: también incluye minificación de CSS.
  • presets de cssnano: default para transformaciones seguras, advanced para agresivas (con algunos compromisos).

Esta herramienta es para minificación única, correcciones rápidas y aprender lo que realmente hacen los minificadores. Para un flujo de trabajo de producción, utiliza una herramienta de construcción para que tu fuente permanezca legible y solo la salida esté minificada.

Cuándo la minificación puede romper tu CSS

Raro pero posible:

  • Selectores sensibles a espacios en blanco: .foo .bar vs. .foo.bar, el espacio importa.
  • Valores de propiedades personalizadas con espacios: --shadow: 0 2px 4px rgba(0,0,0,0.1), las comas dentro de rgba() no deben ser eliminadas.
  • Comentarios de bloque no cerrados: /* falta cierre consume todo lo que sigue. Los minificadores pueden comportarse mal con entradas mal formadas.

La solución: siempre ejecuta tu salida minificada a través de una prueba de lint/test antes de enviarla.

Preguntas frecuentes

No. Un archivo CSS correctamente minificado es diferente en bytes pero semánticamente idéntico. Cada selector, propiedad y valor produce el mismo resultado visual. Si ves un cambio en el renderizado, el minificador tiene un error o tu entrada tenía una sintaxis sensible a espacios en blanco.

Sí, cuando pulsas “Minify CSS”. El CSS que pegas se envía a nuestro servidor para ser minificado y el resultado se devuelve a la página. No se guarda en una base de datos ni se añade al enlace de la página.

Después. Minifica el CSS final compilado que los navegadores realmente reciben. La salida de Sass ya es razonablemente compacta pero tiene espacios en blanco y comentarios que la minificación elimina.

Modesto pero real, típicamente 5-15% además de gzip. Eliminar espacios en blanco y comentarios también hace que los patrones de gzip sean ligeramente más densos.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.