Minificador CSS

Pega tu hoja de estilos: los comentarios, los espacios de más y los saltos de línea desaparecen con un clic, con el porcentaje de bytes ahorrados.

0Bytes originales
0Bytes minificados
0%Ahorro

Tu código se queda en tu navegador: no se guarda ni se envía nada a ninguna parte.

¿Por qué minificar tu CSS?

Cada espacio, salto de línea y comentario de una hoja de estilos es un byte que el navegador descarga pero nunca usa: en la mayoría del CSS escrito a mano, la minificación recorta un 15–30% del tamaño del archivo. Un archivo más ligero significa un First Contentful Paint más rápido, una mejor puntuación en Core Web Vitals y menos datos gastados por quien te visita desde una conexión móvil. Es una de las optimizaciones más sencillas y sin ninguna contrapartida: para el navegador, el CSS minificado se comporta exactamente igual que el original.

Qué elimina esta herramienta (y qué deja intacto)

Elimina los comentarios /* … */ y los saltos de línea, la indentación, los espacios alrededor de las llaves, los dos puntos, las comas y los combinadores, y el punto y coma final antes de }. Las cadenas entre comillas y el contenido de url(…) están protegidos y se devuelven intactos: una regla content: "a b" o una ruta con espacios no se alterarán. Los selectores, las propiedades y los valores se quedan exactamente como los escribiste.

La compresión del servidor ya hace la mitad del trabajo

Casi todos los servidores envían el CSS comprimido con gzip o brotli, y esos algoritmos son excelentes justo con este tipo de texto repetitivo: espacios, sangrías y nombres de propiedades que vuelven mil veces se comprimen estupendamente. En una hoja ya comprimida, la minificación gana mucho menos de lo que sugiere la caída de caracteres.

La ganancia sigue siendo real por dos motivos: el archivo ocupa menos memoria tras la descompresión y el navegador lo analiza más rápido. En un sitio pequeño hablamos de pocos kilobytes, en un proyecto con diez hojas de estilo la suma empieza a contar.

Lo que un minificador no debe tocar

Dentro de las cadenas y las URL los espacios son contenido, no formato: quitar un espacio dentro de content: "a b" cambia lo que se ve en la página. Lo mismo vale para el contenido de los data: incrustados, donde un carácter de menos rompe la imagen.

El otro punto delicado son los cálculos y los selectores: dentro de calc() los espacios alrededor del más y el menos son obligatorios por sintaxis, y en el selector a > b el espacio se puede quitar mientras que en a b no, porque ahí el espacio ES el operador de descendencia.

El archivo minificado no se edita

Un CSS minificado es un archivo generado, no un fuente: se edita el original y se regenera. Corregir directamente el archivo minificado lleva a dos versiones divergentes, y la primera vez que alguien regenere, la corrección desaparece sin dejar rastro.

Por el mismo motivo el minificado no se pone bajo control de versiones si el proyecto ya tiene una fase de construcción: son miles de líneas que cambian todas en cada compilación y dejan ilegible el historial. Si en cambio el sitio está hecho a mano, conservar los dos archivos es el único camino, y entonces vale la regla de arriba.

Herramientas cercanas

Para el JSON está Formatear y validar JSON, y si tu CSS es ilegible porque ya está minificado, el sentido contrario vive dentro de la misma herramienta. Para generar reglas en vez de limpiarlas, mira Generador de degradados CSS.