Formateador y minificador CSS

Pegue el CSS para ordenarlo y vea qué ahorra exactamente al minificar

El formateador y minificador CSS transforma una misma hoja de estilos en dos direcciones. Formatear (también llamado embellecer o «beautify») toma una línea comprimida como .card{margin:0;padding:16px}, coloca una declaración por línea y ajusta la sangría para que una persona pueda leerla. Minificar hace lo contrario: elimina comentarios, espacios y saltos de línea que el navegador no necesita, de modo que el archivo que se publica pese menos. Ambos resultados deben aplicar exactamente los mismos estilos que el original, y la herramienta está construida para cumplir esa condición.

Quitar los espacios con una expresión regular es la forma más rápida de romper una hoja de estilos, porque también borra los espacios alrededor del signo menos en calc(100% - 2rem) y deja el valor inválido. Esta herramienta lee el código como lo describe la especificación de CSS, es decir, por comentarios, cadenas, paréntesis y declaraciones, y solo después lo vuelve a escribir. Así distingue un espacio que se puede borrar de otro que cambia el significado. Bajo el resultado, el mapa de tamaño dibuja el original y la salida como dos barras con la misma escala, y permite ver cuánto ocupan las reglas, los bloques @media y los comentarios, y cuánto se redujo cada parte. El panel «Hallazgos» señala los errores por número de línea, por ejemplo una sola } sobrante que hace que el navegador descarte la regla siguiente.

Cuándo conviene formatear o minificar

La forma que conviene a una hoja de estilos mientras se edita no es la que conviene al navegador que la descarga. Para editar hace falta código desplegado, y para publicar, código corto. Estas son situaciones en las que la herramienta resulta útil.

• Leer el .min.css de una biblioteca: si solo se dispone del archivo minificado y se quiere saber dónde se define el color de un botón, primero hay que desplegarlo. Se pega en modo Formatear y se busca en el cuadro de resultado.
• Ordenar estilos copiados de las herramientas de desarrollo o de otro sitio: el CSS copiado suele tener sangrías mezcladas o venir en una sola línea. Con una pasada se ve enseguida el límite entre selectores y declaraciones.
• Pegar en el campo de CSS personalizado de un gestor de contenidos o de una tienda online: si el campo es pequeño o tiene límite de caracteres, la versión minificada cabe mejor. Conviene guardar el original aparte y pegar solo la copia minificada.
• Buscar por qué un estilo no se aplica en una parte de la página: la causa suele ser una } sobrante o un paréntesis sin cerrar en la regla anterior. «Hallazgos» indica la línea y el selector que se descarta.
• Comprobar cuánto ahorra realmente minificar: el porcentaje que se reduce en bytes no coincide con el que se reduce en la red cuando el servidor envía el archivo con gzip. La barra gzip del mapa de tamaño muestra ambos valores.

Cómo se usa

1. Pegue el CSS en el cuadro de entrada de la izquierda (encima, en pantallas estrechas). También puede pulsar «Abrir archivo» o arrastrar un archivo .css al cuadro. Se admiten archivos de hasta 5 MB.
2. Elija Formatear o Minificar en la parte superior. El resultado se actualiza mientras escribe.
3. En Formatear se puede elegir la sangría (2 espacios, 4 espacios o tabulación), si se conservan los comentarios y si los selectores se separan en una línea por cada coma. En Minificar se elige el tratamiento de los comentarios (solo /*!, quitar todos, conservar todos) y si se abrevian los colores hexadecimales.
4. En el mapa de tamaño, al pulsar un tramo de la barra se resalta esa parte en el cuadro de resultado. Al pulsar el botón con el número de línea en «Hallazgos», esa línea queda seleccionada en la entrada.
5. «Copiar resultado» lo envía al portapapeles y «Guardar archivo» lo descarga. El resultado minificado se guarda con la terminación .min.css.

Qué cambia al formatear

Formatear no altera el orden de nada: solo vuelve a colocar saltos de línea y espacios. Cada declaración va en su propia línea, con un espacio tras los dos puntos y un punto y coma al final, y las reglas anidadas se sangran un nivel más. Entre bloques queda una línea en blanco, y un comentario que estaba al final de una declaración sigue al final de esa declaración.

Como muestra la última fila, en una propiedad personalizada que empieza por -- no se añade espacio tras las comas. El valor de una propiedad personalizada se conserva tal como se escribió y el método getPropertyValue() de JavaScript devuelve ese mismo texto, así que un espacio añadido por estética podría cambiar lo que lee un script. La separación de selectores en cada coma se puede desactivar; en ese caso queda h1, h2 > a { en una sola línea.

Qué elimina la minificación y qué conserva a propósito

Minificar acorta el texto solo mientras el resultado sea idéntico. Casi todos los espacios se pueden borrar, pero algunos forman parte de la gramática y, si se quitan, el código pasa a ser otro. Las seis últimas filas de la tabla son lugares donde otros minificadores suelen estropear el CSS, y esta herramienta los deja intactos.

Por eso un valor como --brand: #C44A00 sigue con el hexadecimal en mayúsculas después de minificar, mientras que color: #FFFFFF, en una propiedad normal, pasa a #fff. La lista «Qué se cambió» indica por separado los comentarios eliminados y sus bytes, los puntos y coma quitados, los colores abreviados y los bytes que se ahorraron en espacios.

Cuánto se ahorra: proporción y tamaño de transferencia con gzip

Los bytes que se ahorran al minificar no son los que viajan por la red. La mayoría de los servidores comprimen el CSS otra vez con gzip o brotli, y ese tipo de compresión aprovecha muy bien los patrones repetidos, de modo que la sangría y los saltos de línea que se eliminan ya estaban en gran parte comprimidos. La tabla siguiente minifica con esta herramienta el ejemplo de esta página y el archivo publicado de Bootstrap 5.3.8, y mide el tamaño con gzip usando el compresor del propio navegador (Chromium).

En un archivo grande como Bootstrap, minificar reduce un 17% los bytes, pero el tamaño con gzip baja solo un 8% aproximadamente, porque gzip ya había eliminado casi todo el espacio en blanco. En un archivo muy pequeño ocurre lo contrario: gzip añade 18 bytes fijos de cabecera y cola (RFC 1952), así que apenas tiene margen de mejora. Aun así, minificar reduce el número de caracteres que el navegador debe leer e interpretar y, donde no se usa gzip, el ahorro es el de la transferencia. El archivo minificado oficial de Bootstrap va más lejos, porque reordena selectores y reescribe valores como rgba(0,0,0,0) a transparent; por eso pesa 648 B menos, pero tras gzip el resultado de esta herramienta fue 47 B menor. Cuando el navegador interpretó la salida de esta herramienta, las 2.660 entradas, incluidas las reglas dentro de @media, resultaron idénticas a las del original. La única diferencia fue el espacio junto a las comas en los valores con var().

Las cifras de gzip se midieron con la configuración por defecto del navegador, así que pueden variar algo según el nivel de compresión de su servidor o si usa brotli. En el mapa de tamaño, 1 KB equivale a 1.024 B.

Errores que hacen desaparecer una regla

El CSS no se detiene ante un error: descarta la parte defectuosa y sigue leyendo. Eso evita que la página se desmorone, pero tampoco avisa de lo que se ha descartado, y por eso cuesta encontrar la causa. Los seis casos siguientes se basan en cómo leen realmente el CSS los navegadores (CSS Syntax 3); la herramienta lo lee igual y muestra cada caso en «Hallazgos» con su número de línea.

También se muestran algunos casos que no son errores, pero conviene revisar. Si una misma propiedad aparece dos veces en una regla, solo se aplica el último valor. Como display: -webkit-box; display: flex; puede ser un respaldo deliberado para navegadores antiguos, solo se muestra como nota. Una regla vacía, sin declaraciones, también se señala como nota, pero al minificar no se elimina.

El CSS anidado y la sintaxis nueva se leen tal cual

El anidamiento de CSS permite escribir &:hover { … } o @media directamente dentro de una regla, y hoy todos los navegadores principales lo admiten. La herramienta distingue reglas anidadas y declaraciones como lo hace la especificación: dentro de un bloque, si aparece una { antes que un ; o una }, se trata de una regla, y si no, de una declaración. Al formatear, cada nivel se sangra una vez. Al minificar, se conserva el ; entre una declaración y la regla anidada que la sigue.

Las versiones son las primeras que admiten cada función, según los datos de compatibilidad de MDN consultados el 2026-10-22. Desde las versiones indicadas, el anidamiento incluye también las reglas que empiezan por el nombre de una etiqueta, como a { … }; Chrome 112 a 119 y Safari 16.5 a 17.1 no admitían esa forma. Otras at-rules como @container, @supports, @scope y @property se leen de la misma manera.

Errores frecuentes

• Editar el archivo minificado y volver a minificarlo: se puede formatear un archivo minificado y modificarlo, pero los comentarios que se eliminaron no vuelven. Conviene mantener aparte el archivo original que se edita y generar la copia minificada a partir de él en cada publicación.
• Ordenar las propiedades alfabéticamente: en margin-top: 8px; margin: 0; gana el margin: 0 posterior y el margen superior es 0, pero al ordenar alfabéticamente margin pasa delante, gana margin-top: 8px y el margen superior pasa a 8px. Por eso la herramienta no incluye una opción de ordenar.
• Borrar los comentarios de licencia /*!: mucho código, incluido el de licencia MIT, exige que el aviso de copyright permanezca en las copias. Al minificar el CSS de otra persona, conviene mantener el valor por defecto (solo /*!).
• Sustituir todos los 0px por 0: hay lugares donde la unidad es necesaria, como flex: 1 0px, el 0% de un fotograma clave o calc(0px + 10%). No debe hacerse con una búsqueda y reemplazo general.
• Dejar comentarios // de SCSS en el CSS: el CSS no tiene comentarios //. En la regla de la línea siguiente a // botón, ese texto se pega al selector y la regla se descarta. Si en el resultado formateado aparece // delante de un selector, es lo que ha ocurrido.
• Concatenar archivos cuando a uno le falta la última }: al unir varios archivos CSS, un bloque sin cerrar en el primero se traga todo el siguiente. Antes de unirlos, conviene pegar cada archivo y comprobar que «Hallazgos» queda vacío.

Límites y precauciones

• Solo lee CSS estándar. Las funciones propias de SCSS y Less, como las $variables, @mixin y @include, los comentarios // y las operaciones, no se interpretan como CSS; para esos archivos conviene usar el compilador de Sass o Less, o bien Prettier.
• No hace optimizaciones estructurales: fusionar selectores idénticos, eliminar declaraciones sobrescritas, reunir margin-top y similares en un único margin o depurar prefijos de fabricante. De ese trabajo se encargan herramientas de compilación como cssnano, Lightning CSS y esbuild.
• No genera mapas de origen. Un /*# sourceMappingURL=… */ final es un comentario normal y la configuración de minificado por defecto lo elimina; si lo necesita, cambie los comentarios a «conservar todos».
• La comprobación de sintaxis llega hasta paréntesis, comillas, comentarios y dos puntos. No juzga un nombre de propiedad mal escrito como colr: red, una unidad incorrecta en un valor ni si un navegador admite algo.
• Se abren archivos de hasta 5 MB y, si el resultado supera los 300.000 caracteres, se omite el coloreado de sintaxis por rapidez y se muestra el texto sin colores.
• El tamaño con gzip se midió con la compresión por defecto del navegador y puede diferir de la configuración de su servidor.

Fecha de referencia Las especificaciones CSS del W3C (Syntax 3, Values 4, Media Queries 4, Color 4, Flexbox 1, Cascade 5, Nesting 1) y los datos de compatibilidad de navegadores de MDN se comprobaron en sus textos originales el 2026-10-22. La tabla de tamaños usa valores medidos ese mismo día con CompressionStream de Chromium, y las cifras de Bootstrap corresponden a los archivos de distribución de la versión 5.3.8.

Fuentes

• 01W3C: CSS Syntax Module Level 3CRD 2026-10-01. §4.3.2 comentarios, §4.3.5 cadenas, §5.5.3 una } sobrante en el nivel superior, §5.5.5 distinguir declaraciones y reglas dentro de un bloque, §5.5.6 declaraciones sin dos puntos
• 02W3C: CSS Values and Units Module Level 4WD 2024-03-12. §10.8 los espacios alrededor de + y − en calc() son obligatorios; * y / pueden ir sin espacios
• 03W3C: Media Queries Level 4CRD 2026-02-19. §3 si no hay espacio entre and, not u or y el (, el texto pasa a ser un token de función
• 04W3C: CSS Color Module Level 4CRD 2026-10-20. §5.2 notación hexadecimal de 3, 4, 6 y 8 dígitos
• 05W3C: CSS Flexible Box Layout Module Level 1CRD 2025-10-14. §7.1 el 0 sin unidad en la propiedad abreviada flex
• 06W3C: CSS Cascading and Inheritance Level 5CR 2022-01-13. §6.4.3 las capas se ordenan según su primera declaración
• 07W3C: CSS Nesting Module Level 1WD 2026-01-22. Reglas anidadas y el selector &
• 08MDN: datos de compatibilidad de navegadoresConsultado el 2026-10-22. Anidamiento Chrome 120, Firefox 117, Safari 17.2; @layer 99, 97, 15.4; CompressionStream gzip 80, 113, 16.4
• 09cssnano: discardCommentsLos comentarios especiales marcados con ! (/*! … */) se conservan por defecto
• 10IETF RFC 1952: GZIP file formatCabecera de 10 bytes más una cola de 8 bytes (CRC32 e ISIZE)
• 11Archivos de distribución de Bootstrap 5.35.3.8 dist/css/bootstrap.css y bootstrap.min.css (MIT), descargados y medidos el 2026-10-22

Preguntas frecuentes

Herramientas relacionadas