Minificador de CSS
Cada byte de CSS que descarga un visitante es un byte que la página espera antes de poder pintar, y la mayoría de las hojas de estilos arrastran holgura que un paso de build debería eliminar: desde la indentación y los comentarios hasta los colores escritos en su forma larga y las reglas que podrían fusionarse. Este minificador lo elimina todo de un solo pegado. Sueltas una hoja de estilos y recuperas el CSS equivalente más pequeño, con los tamaños original, minificado y gzip mostrados en paralelo para que el ahorro nunca sea una suposición. Lee el CSS en un árbol sintáctico real en lugar de cortar por los espacios, así que la salida se comporta exactamente como el origen, y lo que no consigue leer aparece listado con su posición en vez de desaparecer en silencio. Todo se ejecuta localmente en tu navegador.
Resumen
Un minificador solo vale la pena si puedes confiar en la salida y ver la ganancia. Este está construido en torno a ambas cosas: una compresión precisa que puedes desplegar y las cifras que demuestran que valió la pena.
- 01
Minificación basada en parser
La hoja de estilos se lee en un árbol sintáctico real antes de eliminar nada, así que los comentarios, los espacios y los tokens redundantes desaparecen mientras el significado se mantiene. No hay un frágil reemplazo de texto que se rompa ante un selector inusual o un data URI.
- 02
Valores y colores más inteligentes
Los valores en forma larga se colapsan cuando es seguro hacerlo. Un color hexadecimal de seis dígitos se reduce a tres, una longitud cero pierde su unidad, y los puntos y coma finales y los ceros iniciales desaparecen. Pequeñas mejoras que se acumulan en un archivo grande.
- 03
Reestructuración opcional de reglas
Activa la reestructuración para fusionar selectores duplicados, combinar reglas adyacentes y reordenar declaraciones para una carga más pequeña. Desactívala cuando quieras que la salida refleje el orden del origen línea por línea.
- 04
Nada desaparece en silencio
Un parser que se recupera de un error de sintaxis descartando lo que no supo leer te devuelve un archivo más pequeño y ningún aviso. Aquí cada omisión aparece con su línea y su columna, y una hoja escrita con anidamiento se señala en lugar de quedarse sin sus reglas anidadas.
- 05
Un desglose de tamaño fiable
La entrada y el resultado llevan cada uno su conteo de bytes y su cifra gzip, junto al porcentaje exacto ahorrado, de modo que comparas lo mismo con lo mismo. El par de cifras gzip es el que coincide con lo que viaja por la red.
- 06
Copiar, descargar o subir
Pega desde el portapapeles, carga un archivo desde disco y luego copia el resultado o guárdalo como archivo min.css. Todo el proceso dura segundos y nunca toca un servidor.
Cómo usarla
Pasa de una hoja de estilos legible a una mínima y lista para producción en unos pocos pasos, con el ahorro siempre delante de ti.
- 01
Pega tu CSS en el panel de entrada, o usa Subir para cargar un archivo directamente desde disco.
- 02
Elige tus opciones. Deja Reestructurar activado para la salida más pequeña, o desactívalo cuando necesites conservar el orden de las reglas, y conserva los comentarios de licencia si publicas un aviso.
- 03
Compara los tamaños en las cabeceras de los dos paneles: cada lado muestra sus bytes y su cifra gzip junto al porcentaje ahorrado.
- 04
Copia el CSS minificado o descárgalo como archivo min.css, y luego conéctalo a la página o al paso de build que sirve tus estilos de producción.
Detalles
Los detalles que hacen que la salida sea segura de desplegar y rápida de confiar.
- Basado en csso, un optimizador de CSS maduro que trabaja sobre un árbol sintáctico completo en lugar de por sustitución de texto.
- El tamaño gzip se mide con la compresión integrada en tu navegador, así que la cifra refleja lo que un servidor real enviaría.
- La minificación se ejecuta un instante después de que dejas de escribir, sin ningún botón que pulsar ni viaje de ida y vuelta a un servidor.
- Todo lo que el parser no pudo leer aparece con su línea, su columna y el motivo, en lugar de desvanecerse de la salida.
- Nada se sube ni se registra. El CSS que pegas, incluido el trabajo sin publicar, permanece en tu navegador y desaparece al cerrar la pestaña.
Casos de uso
Dónde compensa recortar el CSS hasta su esencia.
-
Publicar una página más rápida
Una hoja de estilos más pequeña llega antes al navegador y desbloquea el renderizado, lo que ayuda al First Contentful Paint y a los Core Web Vitals que los buscadores tienen en cuenta.
-
Un paso de build sin empaquetador
En un sitio estático, una landing page o una plantilla de correo donde no ejecutas un empaquetador, pega el CSS aquí para la misma compresión que te daría una pipeline.
-
Insertar el CSS crítico
Cuando insertas los estilos de la parte superior de la página para evitar una petición que bloquea el renderizado, cada byte cuenta, y el minificado es la única forma sensata de incrustarlo.
-
Adelgazar una hoja de estilos generada
El CSS de terceros y la salida generada por herramientas suelen publicarse sin minificar. Pásalos por aquí para recuperar los bytes antes de que lleguen a tus usuarios.
Ver también
¿Haces lo mismo con tus scripts? Combina esto con el Minificador de JavaScript, y cuando prefieras expandir y ordenar el código en vez de reducirlo, el Formateador de SQL formatea en la dirección opuesta. Y para ir en sentido contrario con la misma hoja de estilos —devolver una línea larga a algo que una persona pueda leer— eso es el Embellecedor de CSS.
Qué hace realmente minificar CSS
Minificar no es ofuscar, y no es lo mismo que la compresión gzip. Elimina los caracteres que un navegador no necesita mientras mantiene idéntico el resultado renderizado. Esto es lo que se va y por qué es seguro.
-
Espacios y formato
La indentación, los saltos de línea y los espacios que hacen legible el CSS no significan nada para un navegador. Un minificador los elimina, junto con el punto y coma final antes de cada llave de cierre, porque el parser no necesita nada de eso.
-
Comentarios
Los comentarios del código fuente se escriben para personas y nunca llegan a la página renderizada, así que se eliminan por completo. La única excepción es un aviso de licencia, que las herramientas conservan por convención cuando se lo pides.
-
Valores equivalentes más cortos
Muchos valores tienen una escritura más corta que significa lo mismo. Un hexadecimal blanco se reduce de seis dígitos a tres, una longitud de cero píxeles se convierte en un cero simple, y el cero inicial de un decimal desaparece. Un minificador cuidadoso los aplica solo cuando el resultado es idéntico.
-
Fusión y reestructuración
Cuando dos selectores comparten declaraciones, o el mismo selector aparece dos veces, sus reglas pueden combinarse, y las declaraciones cercanas pueden reordenarse. Esto ahorra más bytes pero cambia cómo se dispone el origen, por eso es opcional.
-
Por qué gzip es la cifra que cuenta
Los servidores envían el CSS comprimido con gzip o brotli, y estos ya colapsan los espacios repetidos. Minificar sigue siendo útil, porque elimina lo que la compresión no puede y le entrega al compresor una entrada más limpia, pero deberías juzgar siempre la ganancia por el tamaño gzip en lugar de los bytes en crudo.
-
Minifica para producción, mantén el origen legible
El CSS minificado es incómodo de editar, así que pertenece a la salida de tu build, no a tu repositorio. Escribe y commitea la versión expandida, y minifica como el último paso antes de desplegar.
Buenas prácticas
Hábitos que mantienen el CSS minificado a la vez pequeño y libre de sorpresas.
- Minifica como el último paso de tu build y despliega el resultado. Nunca edites a mano el CSS minificado ni lo commitees como tu fuente de verdad.
- Juzga la ganancia por el tamaño gzip, ya que eso es lo que el servidor transfiere en realidad. Un gran ahorro en crudo puede reducirse a poco una vez aplicada la compresión.
- Revisa la lista de omisiones antes de desplegar. Lo que aparece ahí lo descartó el parser, un navegador también lo ignoraría, y casi siempre es una errata que conviene arreglar en el origen.
- Mantén la reestructuración activada para producción, pero desactívala cuando compares la salida con un diff o necesites que los selectores y el orden coincidan con el origen.
- Sirve el archivo minificado con gzip o brotli activados y un tiempo de caché largo. La minificación y la compresión de transporte se suman, no se sustituyen entre sí.
- Conserva los avisos de licencia con la opción correspondiente cuando empaquetes CSS de terceros, para mantenerte dentro de los términos que debes cumplir al publicar.
Limitaciones
Lo que esta herramienta hace y lo que deja a otros pasos.
- Minifica una única hoja de estilos de CSS válido. No empaqueta archivos importados, no resuelve URLs ni sigue referencias a otros archivos.
- No admite anidamiento. El motor se escribió antes de que existiera esa sintaxis y borraría los bloques anidados, así que una hoja anidada se señala con la posición de la primera regla anidada en vez de minificarse.
- No añade prefijos de navegador, no transpila sintaxis moderna ni degrada funciones para navegadores antiguos. Combínala con una herramienta como Autoprefixer o Lightning CSS para eso.
- Los estilos escritos en un preprocesador como Sass o Less, o con directivas de framework como @apply, deben compilarse primero a CSS estándar. La herramienta señala la primera que encuentra en lugar de minificar a su alrededor.
- Lo que el parser no puede leer se omite en lugar de adivinarse, igual que un navegador lo ignoraría, y cada omisión aparece con su posición para que veas qué no sobrevivió.
- Los archivos se leen en el navegador, así que las subidas están limitadas a 2 MB. Una hoja de estilos mayor encaja mejor en un paso de build.
Preguntas frecuentes
Preguntas frecuentes sobre minificar CSS, qué cambia y cuándo usarlo.
¿Minificar cambia cómo se renderiza mi CSS?
No. La minificación solo elimina caracteres que el navegador no necesita, como espacios, comentarios y puntos y coma redundantes, y reescribe los valores a formas más cortas que significan exactamente lo mismo. El resultado renderizado es idéntico. La reestructuración opcional también mantiene el comportamiento y solo cambia cómo se organizan las reglas internamente.
¿Cuál es la diferencia entre minificar y usar gzip?
Trabajan juntos. La minificación edita el propio texto CSS y elimina contenido que un compresor no puede saber que es innecesario. Luego gzip o brotli comprimen lo que envías, colapsando la repetición en la red. Quieres ambos: minifica primero para obtener la entrada más limpia y deja que el servidor la comprima para el transporte. Los dos paneles muestran una cifra gzip, así que puedes compararlas directamente.
¿Cuánto se reducirá mi CSS?
Depende por completo de cómo se escribió el origen. Las hojas de estilos con muchos comentarios, con formato generoso o repetitivas pueden bajar de un tercio a la mitad en tamaño en crudo, mientras que un CSS ya ajustado quizá recorte poco. Una vez que entra gzip el porcentaje se reduce, porque la compresión ya había recuperado gran parte de los espacios, y por eso comparar las dos cifras gzip es lo honesto.
¿Puede minificar CSS que usa anidamiento?
De momento no. El motor que hay detrás se escribió antes de que el anidamiento llegara a CSS, y borraría cada bloque anidado sin decir nada, dejándote una hoja de estilos a la que le faltan reglas sin que se note. En vez de devolverte eso, la herramienta detecta el anidamiento y señala la primera aparición. Aplánalo, o deja que lo minifique una herramienta de build que entienda el anidamiento.
¿Qué pasa si mi CSS tiene un error de sintaxis?
El parser omite la parte que no puede leer y sigue adelante, que es lo mismo que hace un navegador con una declaración rota. La diferencia es que aquí cada omisión aparece con su línea, su columna y el motivo, así que un dos puntos que falta se convierte en un aviso y no en una regla que desaparece sin más. Si no sobrevive nada, la herramienta te lo dice en lugar de mostrar un panel vacío. Y si la entrada no es CSS puro, como Sass o un archivo que usa @apply, se informa de que necesita pasar por el build en vez de minificar a su alrededor.
¿Debería commitear el CSS minificado en mi repositorio?
No. El CSS minificado es un artefacto de build, no código fuente. Commitea la versión legible y expandida que tú y tus compañeros editáis de verdad, y genera el archivo minificado como paso final antes de servirlo. Registrar la salida minificada hace las revisiones difíciles de leer y las fusiones dolorosas.
¿Romperá mis variables, animaciones o media queries?
No. Las propiedades personalizadas, los keyframes, las media queries y las supports queries, las capas en cascada, las container queries y las expresiones calc se leen y se conservan. La minificación entiende la sintaxis, así que las construcciones válidas sobreviven intactas. El anidamiento es la única parte del CSS moderno que el motor no sabe leer, y por eso la herramienta se detiene antes de perderlo.
¿Mi CSS se sube a algún sitio?
No. Todo se ejecuta en tu navegador. El CSS que pegas, cualquier archivo que subas y el resultado se procesan localmente, nunca se transmiten ni almacenan, y desaparecen en el momento en que cierras la pestaña, así que incluso los estilos privados o sin publicar están a salvo.
Herramientas relacionadas
Sigue con el resto del kit de herramientas de datos y formato.