Formateador de CSS
Formatea y embellece CSS con sangría consistente.
Sobre esta herramienta
Formatea y embellece CSS: las reglas comprimidas o desordenadas pasan a tener una declaración por línea y un espaciado coherente, para que revisiones y diffs se lean bien. Solo cambian los espacios; selectores, valores y cascada quedan igual.
Cómo usar
Pega CSS minificado o escrito en una sola línea, pulsa Formatear y copia el resultado a tu editor. Para el camino inverso, usa el minificador.
Ejemplo
El ejemplo parte de una tarjeta minificada a la que se le devuelve la indentación.
Entrada
.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}Salida
.card {
display: flex;
padding: 1.5rem;
border-radius: .5rem;
background: #fff;
}
.card h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 .5rem;
}Consejo
Formatea antes de abrir la revisión y deja la minificación para el paquete de producción.
Conviene saber
¿Un embellecedor de CSS es distinto de un formateador de CSS?
No. Ambos son la misma operación —reindentar reglas y poner una declaración por línea—, así que esta página cubre los dos.
¿Formatear cambia el comportamiento de mi CSS?
No. Solo cambian los espacios y los saltos de línea, así que la cascada queda idéntica. Las cadenas y los valores url(data:…) están protegidos, por lo que un punto y coma dentro de ellos nunca parte una declaración.