Formateador y minificador de CSS

¿Qué es un formateador de CSS?#

Un formateador de CSS hace dos cosas que parecen opuestas pero resuelven el mismo problema: expande CSS compactado y generado por máquina hacia algo que una persona puede leer, y comprime una hoja de estilo inflada hasta los bytes que de verdad importan. La razón para acudir a uno es casi siempre que el CSS llegó con la forma equivocada para lo que estás haciendo: una herramienta de build volcó una sola línea minificada y necesitas inspeccionar una regla concreta, o un archivo escrito a mano se hinchó y quieres recortarlo antes de enviarlo.

Esta página maneja ambas direcciones con motores reales. Formatear usa css_beautify de js-beautify, que resangra selectores y declaraciones de forma predecible. Minificar usa CSSO, que es un optimizador estructural genuino y no un eliminador de espacios en blanco: fusiona reglas adyacentes con declaraciones idénticas, pliega propiedades longhand en shorthands, elimina declaraciones sobreescritas y solo entonces colapsa los espacios en blanco restantes. El resultado suele ser más pequeño que lo que produce un compactador ingenuo, y semánticamente equivalente a la entrada. Esa distinción importa cuando te preocupa cada byte en el cable.

Cómo usarlo#

1. Pega tu CSS en el panel CSS de la izquierda. Ejemplo carga una hoja corta si quieres probar el comportamiento primero.
2. Elige una Sangría en la barra de herramientas: 2, 4 o tab. Dos espacios es la convención moderna habitual; cuatro es más amable para leer archivos densos.
3. Pulsa una acción:
   • Formatear: resangra y salta de línea a través de js-beautify. Los selectores van en su propia línea, las declaraciones se alinean dentro de las llaves.
   • Minificar: ejecuta la optimización estructural de CSSO y luego emite una salida compacta. Se eliminan los comentarios, se fusionan las reglas duplicadas, los longhand se pliegan en shorthands cuando es seguro.
4. Lee el resultado en el panel de Salida y usa Copiar para llevártelo. Limpiar reinicia ambos paneles.

Si tu entrada tiene una regla sin terminar o una declaración rota, la barra de estado reporta el error en vez de adivinar.

Características principales#

• Formatear y minificar son motores distintos. El embellecedor es js-beautify; el minificador es CSSO. Cada uno hace el único trabajo en el que es bueno, en lugar de una rutina comprometida que intente ambas cosas.
• Optimización real al minificar. CSSO reestructura la hoja: fusiona .a { color: red } .b { color: red } en una regla compartida, colapsa margin: 0 0 0 0 a margin: 0, elimina una declaración que una regla posterior ya pisa. La eliminación de espacios en blanco es el último paso, no el único.
• Tres estilos de sangría. 2 espacios, 4 espacios o tabuladores, con un único menú.
• Lado a lado, listo para copiar. Entrada editable, salida de solo lectura con un botón de copiado en un clic.
• Estrictamente lado del cliente. CSSO y js-beautify van empaquetados en la página y se cargan solo al abrir esta herramienta. Tu hoja de estilo se procesa en el navegador y nunca se sube.

Ejemplo detallado#

Una hoja pequeña en la que dos reglas repiten trabajo y un longhand podría ser más corto:

Entrada:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

Pulsa Formatear con 2 espacios:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

La repetición resulta ahora obvia, justo para lo que sirve un formateador. Pulsa Minificar sobre la misma entrada y CSSO la reescribe de forma estructural:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

Tres cosas ocurrieron a la vez. El padding de cuatro valores colapsó a uno solo porque los cuatro lados eran iguales; los cuatro longhand margin-* se plegaron en el shorthand margin; y las dos reglas color: #ff0000 se fusionaron en una sola con un selector agrupado (y el hex pasó al más corto red). Un eliminador de espacios en blanco plano habría conservado cada byte de redundancia: solo un optimizador reestructurador encuentra esos ahorros.

Preguntas frecuentes#

¿Minificar cambiará el aspecto de mi página?#

No, cuando la entrada es CSS válido. CSSO solo aplica transformaciones que preservan la cascada: fusionar reglas con declaraciones idénticas, plegar longhands cuyos valores son todos iguales, descartar declaraciones que una regla más específica o posterior pisa. Si una transformación fuera ambigua, se omite. Formatear es puramente cosmético y nunca cambia el significado.

¿Minificar conserva mis comentarios?#

No. Los comentarios se eliminan durante el minificado, incluidos los banners estilo /* !important */. Si necesitas que sobreviva una cabecera de licencia o un marcador de build, conserva tu fuente comentada y vuelve a insertar el banner en tu pipeline de build después de minificar.

¿Por qué la salida minificada a veces es más grande que mi entrada?#

Casi siempre porque la entrada ya estaba minificada. CSSO aun así tiene que analizarla y reemitirla, y con una entrada ya compacta y optimizada no hay nada que ganar: la salida es esencialmente del mismo tamaño. Dale CSS escrito a mano o expandido y el ahorro es real.

¿Mi CSS se envía a un servidor?#

No. Ambos motores se ejecutan en tu navegador. Las librerías se cargan bajo demanda desde el propio paquete de la página, así que no hay ninguna petición de red que lleve tu hoja de estilo a ninguna parte.