CSS Formatter & Minifier

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Formatter & Minifier

Este formateador vuelve a sangrar una hoja de estilos según la profundidad de llaves, o la reduce al texto más pequeño que sigue analizándose.

How it works

Busca los tres caracteres que llevan la estructura de CSS — { } y ; — sangrando un nivel por cada llave abierta y poniendo cada declaración en su propia línea. Minificar elimina los comentarios y todos los espacios opcionales: alrededor de llaves, dos puntos, puntos y comas y comas, además del punto y coma final antes de una llave de cierre, ya que la llave termina la declaración de todos modos. No se reordena nada ni se reescribe ningún valor.

When to use it

  • Leer una hoja de estilos minificada sacada de un sitio en producción o de las herramientas de desarrollo.
  • Limpiar CSS pegado desde una herramienta de diseño o un generador de código.
  • Obtener una cifra aproximada del tamaño de una hoja de estilos antes de montar un paso de compilación.
  • Dejar consistente un archivo editado a mano antes de confirmarlo.

Watch out for

  • Ambos modos eliminan los comentarios, incluido un banner /*! ... */ que la licencia de una dependencia le obliga a conservar.
  • Un punto y coma dentro de un valor rompe el embellecedor. url(data:image/svg+xml;base64,...) contiene uno, así que a un data URI incrustado se le cuela un salto de línea en medio y la regla deja de funcionar. Minificar sí gestiona ese caso; embellecer no.
  • Minificar aquí solo elimina espacio en blanco. Un minificador real además fusiona reglas duplicadas y acorta valores (#ffffff a #fff), así que el tamaño que mida aquí no es el que producirá su herramienta de compilación.
  • El código de los preprocesadores se sangra solo por las llaves. El anidamiento de SCSS se verá bien, pero @mixin, & y las variables pasan sin examinarse.

Not the right tool for: La minificación de producción. cssnano o Lightning CSS analizan la hoja de estilos y hacen transformaciones que esto no puede hacer con seguridad.

Frequently Asked Questions

¿Cuánto reduce el tamaño minificar CSS?

Minificar suele quitar entre un 10 % y un 30 % del tamaño de un archivo CSS al eliminar espacios en blanco, comentarios y puntos y comas redundantes. Combinado con la compresión gzip en el servidor, la reducción real del tamaño transferido puede ser de entre el 60 % y el 80 % frente a un CSS sin comprimir ni minificar.

¿Gestiona las propiedades personalizadas de CSS (variables)?

Sí: las variables CSS (--color-primary: #5C5BFE) se conservan y se formatean con normalidad. El formateador no evalúa ni inserta el valor de las variables; las trata como valores de cadena opacos.

¿Debería minificar el CSS en desarrollo?

No: minifique solo en las compilaciones de producción. El CSS minificado es ilegible y complica mucho la depuración. Use su herramienta de compilación (Vite, webpack, esbuild) para minificar automáticamente en producción y mantenga el código formateado en el control de versiones.

How to Use CSS Formatter & Minifier

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.