Formateador CSS

Qué hace un formateador CSS

Un formateador CSS toma una hoja de estilos y reescribe su disposición sin cambiar lo que significa. Cada regla tiene su propio bloque, cada declaración su propia línea, y los bloques anidados, como las media queries, llevan un nivel más de sangría. El resultado es el mismo CSS, solo que más fácil de leer, revisar y editar.

Es útil cuando copias estilos de un archivo minificado, abres un tema escrito a mano durante años o pegas CSS desde las herramientas para desarrolladores del navegador. También ayuda antes de una revisión de código, porque con un formato uniforme el diff solo muestra los cambios reales.

Cómo usar este formateador CSS

1. Pega tu CSS en el cuadro de la izquierda. Se formatea en cuanto lo pegas.
2. O pulsa Abrir archivo para cargar un archivo .css de tu dispositivo, o Ejemplo para probar con código de muestra.
3. Elige la Sangría que quieras: 2 espacios, 4 espacios o tabulaciones.
4. Ajusta el Ancho de línea. Las listas de selectores y los valores largos se parten cuando superan ese ancho.
5. Activa Comillas simples si tu proyecto prefiere 'Inter' a "Inter".
6. Pulsa Formatear (o Ctrl+Intro) para embellecer, o Minificar para comprimir.
7. Pulsa Copiar o Descargar para llevarte el resultado.

Una vez que has formateado algo, el resultado se actualiza mientras escribes. Si el CSS tiene un error de sintaxis, el mensaje bajo los cuadros indica dónde está, y Mostrar en la entrada te lleva a ese punto.

Antes y después

Este es un bloque de CSS minificado:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Después de Formatear con 2 espacios:

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

Fíjate en que el combinador de hijo > recibe un espacio a cada lado, cada selector de la lista va en su propia línea y la regla dentro de la media query lleva sangría. Los comentarios se conservan donde los escribiste.

Minificar CSS

Minificar hace lo contrario. Quita los comentarios y los espacios que los navegadores no necesitan. Al aplicarlo al código formateado de arriba, vuelves a tener una sola línea:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

El minificador es prudente a propósito. Mantiene el espacio de div :first-child, porque quitarlo cambiaría el selector. Mantiene los espacios dentro de calc(100% - 2rem), porque calc los necesita. No toca las cadenas ni los valores url(). Los comentarios que empiezan por /*! se conservan, ya que suelen contener una licencia:

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

No fusiona reglas duplicadas, no acorta colores ni elimina selectores sin uso. Para ese nivel de optimización, usa en tu proyecto una herramienta de compilación como cssnano o Lightning CSS.

Cómo leer los mensajes de error

El formateador necesita CSS válido para funcionar. Si falta una llave, recibes un mensaje como este:

Línea 1, columna 1: Unclosed block

La posición señala el bloque que se abrió y nunca se cerró. Las causas habituales son una } que falta al final de una regla, una { suelta después de un selector o un comentario sin cerrar. Corrige el problema y pulsa Formatear de nuevo.

La herramienta no comprueba si los nombres o los valores de las propiedades existen. colr: red es sintaxis válida, así que se formatea sin avisar. Un linter como Stylelint detecta ese tipo de errores.

Consejos

• Usa 2 espacios salvo que tu proyecto ya use otra cosa. Es la opción más común en las guías de estilo de CSS.
• Guarda el archivo minificado como resultado de la compilación y el formateado como tu código fuente. Editar CSS minificado a mano invita a cometer errores.
• Si el CSS está dentro de un archivo HTML, en una etiqueta style, pega la página entera en el formateador HTML. También formatea el CSS incrustado.
• Los archivos de Sass con anidamiento y $variables van en el formateador SCSS.

Otras formas de formatear CSS

• VS Code: abre el archivo y ejecuta Dar formato al documento (Mayús+Alt+F en Windows, Mayús+Option+F en macOS). Instala la extensión de Prettier para obtener el mismo resultado que en esta página.
• Línea de comandos: npx prettier --write styles.css formatea un archivo en su sitio con Prettier.
• Herramientas para desarrolladores del navegador: el panel Sources (Fuentes) de Chrome y Firefox tiene un botón para mostrar con formato las hojas de estilo minificadas. Sirve para leer, pero no te deja elegir ajustes como el ancho de la sangría.

Esta página es práctica cuando no quieres instalar nada o necesitas revisar rápido un código que viene de otro sitio. Si también trabajas con scripts, el formateador JavaScript usa el mismo motor y las mismas opciones.