Minificador CSS en línea para un sitio más rápido

Introducción

El CSS que uno escribe y el CSS que se publica no tienen por qué verse igual. Mientras trabajás en una hoja de estilos, la sangría, los renglones en blanco entre reglas y los comentarios que explican por qué existe cada regla hacen que el código sea más fácil de leer y de mantener. Nada de eso le sirve al navegador para dibujar la página — un navegador solo necesita selectores, propiedades y valores válidos, y le da lo mismo el espaciado o que una regla esté explicada. Minificar elimina todo lo que está ahí únicamente para un lector humano, así que las mismas reglas llegan al navegador en un archivo más chico. En una hoja de estilos corta el ahorro puede ser de unos pocos kilobytes; en una que creció a lo largo de un proyecto más extenso, con varias rondas de cambios y comentarios olvidados de cuando se probaban cosas, el recorte en lo que hay que descargar antes de que la página se vea bien puede ser considerable.

Cómo minifica tu CSS esta herramienta

Pegar el CSS y hacer clic en «Minificar» hace bastante más que borrar espacios:

• Se eliminan los comentarios, con una excepción. Un comentario escrito con la convención habitual /*! ... */, o que contenga la palabra @license o @preserve, se conserva. Esa es la forma estándar de marcar un comentario como aviso de licencia o de autoría para que las herramientas de compilación no lo borren. Un comentario explicativo común como /* button hover state */ sí desaparece — si necesitás conservar un encabezado de licencia, escribilo en alguna de esas formas.
• Se quitan espacios, saltos de línea y reglas vacías. Todo lo que no haga falta para separar un elemento del siguiente se elimina, y un bloque de regla que quedó vacío (un selector como .old-banner {} sin nada adentro) se borra por completo en lugar de arrastrarse como peso muerto.
• Algunos valores se acortan sin que cambie su significado. Un color escrito como #ffffff pasa a #fff, se recortan los ceros sobrantes (0.500 queda en .5, y un valor como -0px queda en 0), y las palabras clave normal y bold usadas en font-weight se convierten a sus equivalentes numéricos, 400 y 700.
• Se protegen las propiedades personalizadas de CSS y las expresiones calc(). Las variables definidas con el prefijo -- (por ejemplo --brand-color) y las expresiones calc() dependen de signos y espacios que se romperían si se comprimieran como un valor cualquiera, así que se apartan antes de que corran los pasos de limpieza de espacios y recorte de ceros, y después se restituyen intactas.

Lo que conviene saber antes de minificar

Esta herramienta no reordena, ni fusiona, ni elimina reglas repetidas — el resultado tiene los mismos selectores en el mismo orden, solo que compactados. Si lo que buscás es algo que borre el CSS que tu página en realidad no usa, eso es otro tipo de herramienta, no un minificador. Como acá la minificación funciona quitando espacios y acortando valores, y no reinterpretando la estructura de las reglas, el contenido anidado —por ejemplo las reglas dentro de una consulta @media— se queda donde está, y su interior se compacta igual que todo lo demás.

No hay un límite de tamaño propio como el que tienen las herramientas de subida de archivos de este sitio: acá estás pegando texto en vez de subir un archivo, así que el techo práctico es lo que tu navegador maneje con comodidad en un campo de texto, que alcanza de sobra para cualquier hoja de estilos que escribas a mano. Para una hoja de estilos realmente grande, como el paquete completo de un framework y no los estilos propios de una página o un proyecto, suele convenir más un paso de compilación dentro de tu proceso de publicación que pegarla en una herramienta del navegador.

Minificar acá no cambia lo que hace tu CSS, pero igual vale la pena mirar rápido una página con el resultado minificado antes de publicarla o entregarla — la misma costumbre de releer cualquier otra cosa antes de mandarla.

Cuándo es esta la herramienta adecuada

• Preparar un trabajo de clase o un sitio personal para publicarlo. Un archivo CSS más chico carga más rápido, y eso pesa más de lo que parece en la red de la escuela o en un celular con datos móviles.
• Ver cómo es realmente el código de producción. Al mirar el código fuente de un sitio real suele aparecer un CSS que no se parece en nada al que se escribe en clase — minificar tu propia hoja de estilos y compararla lado a lado con el original es una manera concreta de entender por qué, y se complementa con CSS Beautifier para el camino inverso.
• Bajar el peso de la página antes de una fecha de entrega o con un hosting limitado. Algunos alojamientos que dan las escuelas tienen cupos ajustados de espacio o de transferencia; minificar los archivos antes de subirlos es una forma rápida de no pasarse.

Si todavía estás editando la hoja de estilos, seguí trabajando con la versión legible y minificá una sola vez, justo antes de publicar — minificar es el último paso, no un formato de trabajo. Para entender mejor por qué el tamaño de los archivos influye en la velocidad de una página, mira esta guía del compresor de CSS para sitios más rápidos.

Ejemplo

Un chico termina su sitio personal para la clase de diseño web: hojas de estilo separadas para la maquetación, la paleta de colores y las reglas adaptables, cada una con comentarios que quedaron de probar distintas ideas por el camino. Antes de entregar el trabajo, junta todo el CSS y lo pega en esta herramienta. La página se ve y se comporta exactamente igual que antes, pero el archivo que va con ella es más chico y ya no arrastra los comentarios de prueba y error que escribió mientras la armaba.

Preguntas frecuentes

¿Minificar va a cambiar cómo se ve mi página?

No. Las reglas, los selectores y los valores se conservan — solo cambian el formato, los comentarios y un puñado de valores acortados (como los colores en hexadecimal y los ceros sobrantes), y ninguno de esos cambios afecta la forma en que se dibuja la página.

¿Qué pasa con los comentarios de mi CSS?

Los comentarios comunes se eliminan. Un comentario escrito como /*! ... */, o que contenga @license o @preserve, se conserva — es la convención estándar para señalar un aviso de licencia o de autoría.

¿Funciona con variables de CSS y con calc()?

Sí. Las propiedades personalizadas y las expresiones calc() quedan protegidas durante la minificación en lugar de comprimirse como valores comunes.

¿Hay un límite de tamaño?

No hay un límite fijo como en las herramientas de subida de archivos de este sitio — acá pegás texto, no subís un archivo. Los pegados muy grandes, como el paquete completo de una biblioteca, conviene resolverlos con una herramienta de compilación dentro de tu proceso de publicación.

¿Se guarda mi código en algún lado?

No. El CSS pegado se procesa para generar el resultado minificado y no se almacena como archivo ni se conserva después; solo queda registrado que la herramienta se usó, no el código en sí.

¿Puedo minificar más de una hoja de estilos a la vez?

Pegá y minificá un bloque de CSS por vez. Si necesitás minificar varios archivos juntos, unilos antes; si no, repetí el proceso con cada uno.

¿Qué herramientas relacionadas puedo usar?

Usá CSS Beautifier para revertir el proceso y volver legible un CSS minificado, o HTML Minifier y JavaScript Beautifier para otras tareas con código.