Minificar CSS

Cómo funciona

Pegue su hoja de estilos en el panel izquierdo; la versión minificada aparece al instante en el derecho. Primero se quita todo lo que el navegador no necesita: saltos de línea, sangrías, últimos puntos y coma y comentarios /* ... */. Después se acortan los valores: #ffffff pasa a #fff, 0px a 0, 0.50em a .5em (en CSS el decimal siempre se escribe con punto), bold a 700. El modo Completo da un paso más: dos reglas .titulo escritas una tras otra se vuelven una sola, las reglas h2 y h3 con declaraciones idénticas se escriben una vez como h2,h3, una forma larga como margin: 0px 0px 16px 0px queda en 0 0 16px, y de una propiedad escrita dos veces en la misma regla se borra la copia anulada. El código de ejemplo de esta página pasa así de 271 a 149 bytes; la línea de resultado da el mismo balance para su archivo. Los comentarios que empiezan con /*! se conservan por defecto, porque muchas licencias libres exigen que ese texto siga en el archivo distribuido. Si una parte del código es ilegible, por ejemplo una llave que nunca se cierra, el resto se minifica igual; esa parte se omite y la línea de resultado avisa con la línea y la columna del primer problema.

Esta herramienta también se busca como minificar css, minificar css online, comprimir css, css minify, minificador css.

¿Qué es Minificación?

Minificar es quitar todos los caracteres que un programa no necesita sin cambiar su significado. En CSS eso significa sangrías, saltos de línea, comentarios y últimos puntos y coma, además de escrituras más cortas como #fff en lugar de #ffffff. El objetivo es una descarga más ligera: la hoja de estilos frena la primera vista de la página, y cuanto más pequeña sea, antes ve el visitante el contenido.

¿Qué es csso?

csso (CSS Optimizer) es el minificador libre que usa esta página. Primero convierte su CSS en un árbol y luego aplica a ese árbol transformaciones seguras: acortar valores, fusionar reglas con el mismo selector y borrar declaraciones anuladas. En eso se distingue de un simple buscar y reemplazar: como entiende el código, nunca toca el contenido de las cadenas ni de los url(...).

¿Completo o seguro?

En CSS el orden importa: cuando dos reglas apuntan al mismo elemento, gana la última. El modo Completo solo fusiona donde ese orden no puede cambiar el resultado, pero puede mover el contenido de una regla a un punto anterior del archivo. En un sitio moderno con una sola hoja de estilos esto es seguro y da el archivo más ligero.

Si en su página varias hojas se anulan entre sí, o un tema antiguo se sostiene con !important y el orden de las reglas, elija Seguro: el número y el orden de las reglas quedan exactamente igual y solo se comprime el interior de cada una. Ahorra unos puntos porcentuales menos, sin riesgo de un cambio de diseño inesperado. Si tiene dudas, pruebe los dos niveles y abra una vez su página con el archivo minificado.

Lo que la minificación no hace

Minificar no encuentra reglas sin uso. Una regla .banner-viejo que no apunta a nada en su página sigue en el archivo minificado, porque la herramienta solo ve su CSS, no su HTML. Esas reglas muertas se encuentran en la pestaña Coverage de las herramientas para desarrolladores de Chrome.

Si su servidor envía los archivos comprimidos con gzip o brotli, como hace de fábrica la mayoría de los alojamientos, el tamaño que viaja de verdad es mucho menor que las cifras de aquí. Minificar sigue sumando, porque la compresión no borra comentarios ni reescribe valores. No edite el archivo minificado: conserve la fuente con sangría y minifique en cada publicación. Para volver atrás, la herramienta Formatear CSS reabre el archivo, pero los comentarios borrados no regresan.

Preguntas frecuentes

¿Cómo se minifica un archivo CSS?

Pegue el CSS en el panel izquierdo de esta página. El panel derecho lo muestra en una línea, sin espacios ni comentarios y con valores acortados. Cópielo o descárguelo como archivo .min.css; la línea de resultado indica el tamaño antes y después.

¿Minificar el CSS puede romper mi sitio?

En modo Seguro, no: el número y el orden de las reglas no cambian, solo se acorta la escritura. El modo Completo fusiona reglas; no da problemas en sitios con una sola hoja de estilos, pero en temas antiguos donde varios archivos se anulan puede cambiar el aspecto. Abra una vez su página con el archivo minificado antes de publicarlo.

¿Por qué no se borró mi comentario de licencia?

Los comentarios con /*! marcan por costumbre un texto que una licencia libre obliga a mantener en el archivo distribuido; por eso la herramienta los conserva por defecto. Si el código es suyo, cambie la opción de comentarios de licencia a Quitar.

¿Mi código se sube a algún lugar?

No. La minificación la hace una biblioteca que corre en su navegador; su código no sale de esta página ni se envía a ningún servidor.