Desarrollo Web
CSS Minify / Beautify
Comprimir CSS para producción o formatear CSS minificado en un formato legible.
Demasiado grande para previsualizar
Demasiado grande para previsualizar
Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.
How to use it
- Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
- Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
- Handy for quickly reading CSS from a third-party site that only ships a minified version.
Common uses
- Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
- Beautifying minified CSS from a third-party library to read or debug it.
- Estimating how much a CSS file will shrink before setting up an automated build.
Things to keep in mind
Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.
Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.
Artículo sobre esta herramienta: Minificación de CSS: qué se elimina realmente del archivo y por qué
Preguntas frecuentes
¿Qué elimina exactamente la minificación de mi CSS?
Minify elimina espacios en blanco, saltos de línea y comentarios, y acorta algunos valores, reduciendo el tamaño del archivo sin cambiar el comportamiento del CSS.
¿Puede Beautify restaurar perfectamente mi formato original?
Beautify reformatea el CSS minificado con sangría y saltos de línea para legibilidad, pero no puede recuperar comentarios ni tus elecciones de estilo originales, ya que fueron eliminados durante la minificación.
¿Es segura la minificación para cualquier CSS válido?
Sí — para CSS sintácticamente válido, minificar solo elimina caracteres redundantes y nunca cambia selectores o valores de propiedades, y todo ocurre localmente en tu navegador.
¿Necesito minificar si el servidor ya comprime los archivos con Gzip?
Sí — la minificación y la compresión Gzip/Brotli se complementan: la minificación reduce el propio archivo fuente antes de comprimirlo, y Gzip/Brotli comprime aún más el resultado durante la transferencia, así que juntas dan un tamaño final menor que cualquiera de las dos técnicas por separado.
¿Qué es un source map para CSS minificado?
Un source map es un archivo aparte que asocia las líneas del CSS minificado con el código original y formateado, permitiendo que las herramientas de desarrollo del navegador muestren los números de línea y nombres de archivo correctos al depurar, incluso cuando lo que se carga en producción es la versión minificada.