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 todo se ejecuta localmente en tu navegador.
- Lee la hoja de estilos en un árbol sintáctico real, así que la salida minificada se comporta igual que el origen en vez de romperse con un selector inusual
- Muestra juntos los tamaños original, minificado y gzip, para que juzgues el resultado por lo que un servidor envía realmente y no por el conteo de bytes en crudo
- Puede fusionar selectores duplicados y reordenar declaraciones para un archivo más pequeño, o dejar la estructura intacta cuando necesitas un diff limpio
- Se ejecuta por completo en tu navegador, así que el CSS que pegas, incluido el trabajo sin publicar, permanece en tu dispositivo y desaparece al cerrar la pestaña
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
Comentarios de licencia conservados
Los avisos que exigen las licencias y la atribución pueden quedarse mientras se elimina cualquier otro comentario, así cumples sin publicar notas que nadie lee.
- 05
Un desglose de tamaño fiable
Los tamaños original, minificado y gzip se actualizan mientras escribes, junto al porcentaje exacto ahorrado. La cifra de gzip es la 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
Lee el desglose bajo las opciones para confirmar la ganancia, con los tamaños original, minificado y gzip y el 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 mientras escribes, sin ningún botón que pulsar ni demora entre editar y ver el resultado.
- Un error de análisis se muestra en el lugar correspondiente con su mensaje, en vez de producir en silencio una salida rota o vacía.
- 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 elMinificador de JavaScript , y cuando prefieras expandir y ordenar el código en vez de reducirlo, elFormateador de SQL formatea en la dirección opuesta.
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.
- 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 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 deben compilarse primero a CSS estándar, ya que aquí solo se entiende el CSS estándar.
- Un error de sintaxis detiene la minificación y se reporta en lugar de sortearse, así que una entrada muy dañada no producirá una salida parcial.
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. Juzga la ganancia real por la cifra de gzip que se muestra aquí.
¿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 la cifra de gzip es la honesta.
¿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 expresiones calc y el resto del CSS moderno se leen y se conservan. La minificación entiende la sintaxis, así que las construcciones válidas sobreviven intactas.
¿Puedo minificar archivos Sass o Less aquí?
No directamente, ya que esta herramienta trabaja con CSS estándar. Compila primero tu Sass o Less a CSS estándar, algo que la mayoría de configuraciones hacen en su build, y luego pega o sube esa salida aquí para minificarla.
¿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.