Minificador y Formateador de CSS

¿Qué es esta herramienta?

Un minificador de CSS reescribe una hoja de estilos para que ocupe el menor espacio posible sin cambiar cómo se renderiza: elimina comentarios y espacios, acorta valores de color y unidades cero cuando es seguro, fusiona reglas duplicadas y elimina puntos y comas redundantes.

Esta herramienta está construida sobre clean-css, un optimizador de CSS que realmente analiza la hoja de estilos en un árbol de sintaxis en lugar de usar expresiones regulares, por eso maneja con seguridad casos límite que rompen minificadores simples — las propiedades personalizadas de CSS (--main-color: ...), el contenido dentro de cadenas de texto, y selectores y media queries complejos salen correctos.

¿Por qué utilizarlo?

• Minificación basada en árbol de sintaxis (clean-css), no expresiones regulares — segura con propiedades personalizadas, cadenas y media queries anidadas.
• Las optimizaciones de nivel 2 fusionan y simplifican reglas para un ahorro extra más allá de solo quitar espacios.
• Muestra exactamente cuántos bytes y qué porcentaje ahorraste.
• El modo Formatear convierte una hoja de estilos minificada de vuelta en CSS legible con sangría consistente.
• Procesamiento 100% local — los estilos privados o no publicados nunca salen de tu navegador.

Cómo utilizarlo

1. Pega tu CSS en el cuadro de entrada, o haz clic en "Cargar ejemplo" para probar una muestra con una propiedad personalizada y una media query.
2. Haz clic en "Minificar" para comprimirlo, o en "Formatear" para embellecerlo con sangría de 2 espacios.
3. Revisa el mensaje bajo los cuadros — el modo minificar muestra la reducción de tamaño; un CSS inválido muestra un error claro en lugar de producir un resultado roto en silencio.
4. Haz clic en "Copiar" para obtener el resultado.

Ejemplo

Entrada

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Resultado

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

La propiedad personalizada, la media query y el orden de cascada se preservan; solo se eliminan espacios, comentarios y caracteres redundantes.

Consejos prácticos

• Minifica en el momento de compilar/desplegar, no durante el desarrollo — edita el código fuente legible y deja que esta herramienta (o tu pipeline de compilación) genere la versión publicada.
• Si estás depurando por qué una página se ve distinta en producción, formatear primero el CSS minificado hace que la comparación con tu código fuente sea mucho más fácil de leer.
• Las propiedades personalizadas sobreviven a la minificación, así que las hojas de estilos basadas en tokens de diseño (usando --spacing, --color-*, etc.) se pueden procesar sin problemas con esta herramienta.
• Combínalo con los minificadores de HTML y JS de abajo si tu proyecto mantiene todo en archivos separados antes de un lanzamiento.

Dónde encaja en flujos de trabajo reales

El CSS es una de las cosas con mayor impacto al minificar porque las hojas de estilos bloquean el renderizado por defecto — cada byte recortado puede acelerar ligeramente el primer pintado, especialmente en conexiones lentas. Es una mejora menor que la optimización de imágenes, pero es prácticamente gratis una vez integrada en un paso de compilación.

El modo Formatear es útil para el problema opuesto: inspeccionar la hoja de estilos minificada de un competidor o de un proyecto de producción antiguo, para entender su estructura antes de escribir una anulación o un rediseño.

→ Minificador de HTML · Minificador de JS

Casos de uso comunes

• Reducir una hoja de estilos antes de desplegar un sitio estático o landing page.
• Reformatear un archivo CSS minificado obtenido de un sitio en vivo para estudiar su estructura.
• Limpiar CSS exportado desde una herramienta de diseño, que suele incluir comentarios y espacios excesivos.
• Comprobar rápidamente si un fragmento de CSS escrito a mano se analiza correctamente, ya que un CSS mal formado aparece como un error explícito.

Preguntas frecuentes