Formateador CSS

¿Qué es el formateo de CSS?

El formateo de CSS es el proceso de añadir indentación, saltos de línea y espaciado consistentes a las hojas de estilo en cascada para que el código sea legible por personas. Los navegadores ignoran completamente el espacio en blanco en CSS. Una hoja de estilo minificada en una sola línea y una hoja ordenada con indentación producen exactamente el mismo resultado visual. La diferencia está en la legibilidad: el CSS formateado te permite revisar selectores, detectar puntos y coma ausentes y entender la cascada de un vistazo.

Un formateador CSS (también llamado CSS beautifier o pretty-printer) toma CSS comprimido o con estilo inconsistente y lo reescribe con indentación uniforme, una declaración por línea y colocación coherente de llaves. Esta es la operación inversa a la minificación, también denominada embellecimiento o pretty-printing. Mientras que la minificación elimina espacios en blanco para reducir el tamaño del archivo en producción, el formateo restaura la estructura para el desarrollo, la revisión de código y el mantenimiento del código fuente.

La especificación CSS (W3C CSS Syntax Module Level 3) define la gramática de las hojas de estilo, pero no dice nada sobre convenciones de espaciado. Las reglas de formateo son una decisión del equipo: tabuladores frente a espacios, indentación de 2 o 4 espacios, estilo de llaves, líneas en blanco entre bloques de reglas. Un formateador aplica la convención que elijas de forma coherente en todos los archivos. La mayoría de los equipos registra su elección en un archivo .prettierrc o .editorconfig.

¿Por qué usar este formateador CSS?

Pega cualquier CSS y obtén una salida correctamente indentada en milisegundos. Sin plugins que instalar, sin archivos de configuración que escribir, sin cuentas que crear.

Casos de uso del formateador CSS

Referencia de ordenación de propiedades CSS

La mayoría de los formateadores CSS no reordenan propiedades. Sin embargo, muchas guías de estilo recomiendan agrupar las propiedades relacionadas. La tabla a continuación muestra una convención de agrupación habitual utilizada por herramientas como el plugin order de Stylelint y CSScomb:

Esta agrupación es una convención, no un requisito de CSS. Los navegadores aplican las declaraciones según la especificidad y el orden de origen, independientemente de la posición de la propiedad dentro de un bloque de reglas. Un formateador se ocupa del espaciado y la indentación; la reordenación de propiedades es una tarea separada de linting que manejan herramientas como Stylelint.

Formateo CSS frente a minificación CSS

El formateo y la minificación son operaciones inversas, aplicadas en distintas etapas del desarrollo:

Ejemplos de código

Cómo formatear CSS mediante programación en diferentes lenguajes y entornos:

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

Preguntas frecuentes