Formateador CSS

Acerca del formateo de CSS

Minificar elimina espacios, comentarios y caracteres redundantes del CSS para reducir el tamaño del archivo. Embellecer lo expande de nuevo a un estilo indentado con una regla por línea, más fácil de revisar y editar.

La minificación aquí va un poco más allá de eliminar espacios: también reescribe los valores en su forma equivalente más corta, de modo que background-color: white se convierte en background-color:#fff y color: #ff0000 en color:red, según cuál ocupe menos bytes. No analiza qué reglas se aplican realmente a una página —eso es una tarea aparte llamada "eliminación de CSS sin usar" o tree-shaking, que exige conocer tu HTML y JavaScript para saber qué es superfluo, y esta herramienta conserva cada regla que escribiste. Hay una excepción a la eliminación de comentarios: un "comentario bang" que empieza por /*! se conserva deliberadamente, porque es la convención que usan las herramientas de compilación para los avisos de licencia que deben sobrevivir a la minificación.

Dónde te lo encontrarás

• Reducir una hoja de estilos antes de desplegarla en producción
• Reformatear un archivo CSS minificado para leerlo o editarlo
• Limpiar estilos copiados del panel de inspección del navegador
• Estandarizar el formato antes de revisar un diff de CSS

Preguntas frecuentes

¿Minificar cambia el aspecto de mi página?
No. Solo se eliminan los espacios y los comentarios — cada selector, propiedad y valor permanece exactamente como se escribió.

¿Esto admite SCSS o LESS?
No, solo CSS plano. Compila primero tu SCSS o LESS a CSS.

¿Se almacena mi hoja de estilos?
No. La conversión ocurre en el servidor solo para esa solicitud y después no se conserva nada.

¿Esto elimina reglas CSS que mi página en realidad no usa?
No. Esa es otra tarea —normalmente llamada "eliminación de CSS sin usar" o tree-shaking— que exige cruzar tu CSS con el HTML y JavaScript reales para saber qué selectores llegan a coincidir. Esta herramienta solo quita espacios y sintaxis redundante, y acorta los valores a su forma equivalente más pequeña; cada regla que escribiste sale intacta al otro lado, solo más compacta. Si un comentario necesita sobrevivir a la minificación —un aviso de licencia, por ejemplo—, empiézalo con /*! en lugar de /*, y se conservará.