Cómo se usa
- Pegue su hoja de estilos en CSS. Las cadenas y url() se mantienen exactamente como están.
- Deje Modo en Minificar para hacer el CSS más pequeño, o elija Formatear para que sea fácil de leer.
- Compare Bytes antes y Bytes después para ver cuánto se ahorró.
- Copie el Resultado, o descárguelo como styles.css.
Qué quita la minificación y qué mantiene
Un comentario de CSS va de /* a */ y se elimina, salvo un aviso que empieza por /*!, que la herramienta mantiene por la licencia o el crédito que contiene. La especificación CSS Syntax (en inglés) define el comentario, y la herramienta lee las cadenas y los tokens url() con las mismas reglas, así que su contenido se copia tal cual.
Los espacios van donde la gramática no los necesita: alrededor de las llaves, las comas, los dos puntos de las declaraciones y antes de un signo de exclamación. El último punto y coma de un bloque se quita, porque una llave de cierre ya termina el bloque. Un espacio antes de los dos puntos en un selector se mantiene, porque el selector .card :hover significa algo distinto de .card:hover.
a { color : red ; } pasa a a{color:red}Colores, ceros y los acortamientos que no se hacen
Un color hexadecimal cuyos pares se repiten se escribe con tres o cuatro cifras: #ffffff pasa a #fff y #aabbccdd pasa a #abcd. Las letras se escriben en minúscula. Un color en un selector nunca cambia, porque un selector como #aabbcc nombra un id.
Una longitud de 0px al principio de un valor pasa a 0. Dentro de una función como calc(), y en una propiedad personalizada que empieza por dos guiones, la longitud se deja como está, porque un 0 sin unidad no se lee como longitud en todos los contextos. Formatear no cambia ningún color ni ninguna longitud.
- Los tamaños se cuentan en bytes UTF-8, que es como un servidor envía el archivo; una letra con tilde ocupa dos bytes.
- Pruebe la página después de minificarla, porque un truco raro para un navegador antiguo puede depender de un espacio que el minificador elimina.
Ejemplo resuelto: una regla con un comentario, un color y un cero
El texto .card { color: #aabbcc; /* nota */ margin: 0px 10px; } tiene un comentario, un color hexadecimal cuyos pares se repiten y una longitud de cero al principio de un valor. Al minificarlo se quitan el comentario y los espacios, se escribe #abc para el color y 0 para el cero.
El resultado es .card{color:#abc;margin:0 10px}, y la regla funciona exactamente igual que antes.
Preguntas frecuentes
¿El CSS minificado es igual que el original para el navegador?
Sí, para el navegador las reglas se aplican de la misma forma, porque la herramienta quita solo lo que la gramática de CSS no necesita. Aun así, pruebe la página después de minificarla, ya que un truco raro puede depender de un espacio.
¿Por qué la herramienta no quita todas las unidades de cero?
Un cero dentro de una función como calc(), y en una propiedad personalizada, no siempre se lee como longitud; por eso la herramienta acorta 0px solo al principio de un valor. Así el resultado es seguro en todos los casos que trata.
¿Por qué al formatear los comentarios van en líneas propias?
Cada comentario se escribe en su propia línea, al nivel de la regla a la que pertenece, para que la estructura de la hoja de estilos siga siendo fácil de seguir. Los avisos que empiezan por /*! también se mantienen.
¿La herramienta revisa mi CSS en busca de errores?
No. Lee la estructura: comprueba que las llaves, las cadenas y los valores url() sin comillas se cierren. No comprueba si un nombre de propiedad o un valor es válido, así que para eso use un validador.
¿Se guarda o se envía mi CSS a algún sitio?
No. La minificación y el formateo se hacen en su navegador. No se guarda nada ni se envía a nuestro servidor, así que copie el resultado antes de salir de la página.
Fuentes
- W3C (en inglés): CSS Syntax Module Level 3, consume comments
- W3C (en inglés): CSS Color Module Level 4, hex notation
- MDN (en inglés): CSS comments
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.