Formateador y embellecedor de CSS

¿Qué hace un formateador de CSS?

Un formateador de CSS toma código de hojas de estilo en cualquier forma —minificado en una sola línea, con sangrías inconsistentes o copiado desde las DevTools del navegador— y lo reescribe con un diseño predecible: el selector, una llave de apertura, una declaración property: value; por línea y la llave de cierre en su propia línea. Las reglas dentro de bloques @media, @supports y @container reciben un nivel extra de sangría para que la estructura se vea claramente.

Formatear es el primer paso cuando necesitas depurar un tema de terceros, revisar CSS en un pull request o aprender de los estilos de otro sitio. El formateador usa js-beautify y se ejecuta completamente en tu navegador.

Antes y después

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

queda como

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Ten en cuenta que el formateador no añade ni elimina puntos y coma, no reordena propiedades ni cambia valores: solo modifica los espacios en blanco, así que el resultado se comporta exactamente igual que la entrada.

SCSS, Less y CSS moderno

Las reglas anidadas, los selectores padre &, las variables ($brand, @brand), los mixins y el anidamiento nativo de CSS se sangran correctamente. Las propiedades personalizadas (--brand: #4f46e5), clamp(), :is()/:where() y las capas en cascada (@layer) pasan sin cambios.

Convenciones de estilo que conviene adoptar

• La sangría de dos espacios es el estándar de facto en la mayoría de guías de estilo CSS y el valor por defecto de Prettier.
• Un selector por línea en los selectores agrupados hace que los diffs sean más pequeños al añadir o quitar un selector.
• Una línea en blanco entre reglas facilita la lectura en archivos largos.
• Automatiza el formato: ejecuta Prettier o Stylelint en tu editor y en CI para que el formato nunca aparezca en la revisión de código.

¿Vas a publicar en producción? Usa el Minificador de CSS para ver exactamente cuántos bytes ahorras, o marca Minificar arriba. Si de paso quieres convertir valores en píxeles, prueba el convertidor de PX a REM.

También se busca como: formateador css, embellecer css, formatear css online, beautifier css, desminificar css, sangría css, formateador scss, pretty print css.

Herramientas que combinan con: Formateador de CSS

• Formateador HTML — Pega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques <style> y <script> incrustados.
• Formateador de JavaScript — Desminifica y da formato a JavaScript, JSON o JSX con la sangría y el estilo de llaves que prefieras, o elimina espacios y comentarios con un minificador verificado.
• Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
• Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.