Formateur CSS

Qu'est-ce que le formatage CSS ?

Le formatage CSS est le processus qui consiste à ajouter une indentation, des sauts de ligne et des espacements cohérents aux feuilles de style en cascade afin de rendre le code lisible par un humain. Les navigateurs ignorent entièrement les espaces dans le CSS. Une ligne compressée sur une seule ligne et une feuille de style bien indentée produisent un rendu identique. La différence réside dans la lisibilité : un CSS formaté vous permet de parcourir les sélecteurs, de repérer les points-virgules manquants et de comprendre la cascade d'un simple coup d'œil.

Un formateur CSS (parfois appelé embellisseur CSS ou pretty-printer) prend du CSS compressé ou au style incohérent et le réécrit avec une indentation uniforme, une déclaration par ligne et un positionnement cohérent des accolades. C'est l'opération inverse de la minification, également appelée embellissement ou pretty-printing. Alors que la minification supprime les espaces pour réduire la taille du fichier en production, le formatage restaure la structure pour le développement, la revue de code et la maintenance du projet.

La spécification CSS (W3C CSS Syntax Module Level 3) définit la grammaire des feuilles de style, mais ne dit rien sur les conventions d'espacement. Les règles de formatage relèvent d'une décision d'équipe : tabulations ou espaces, indentation à 2 ou 4 espaces, style des accolades, lignes vides entre les blocs de règles. Un formateur applique la convention choisie de manière cohérente dans tous les fichiers. La plupart des équipes consignent leur choix dans un fichier .prettierrc ou .editorconfig.

Pourquoi utiliser ce formateur CSS ?

Collez n'importe quel CSS et obtenez une sortie correctement indentée en quelques millisecondes. Aucun plugin d'éditeur à installer, aucun fichier de configuration à rédiger, aucun compte à créer.

Cas d'utilisation du formateur CSS

Référence d'ordonnancement des propriétés CSS

La plupart des formateurs CSS ne réordonnent pas les propriétés. Mais de nombreux guides de style recommandent de regrouper les propriétés apparentées. Le tableau ci-dessous présente une convention de regroupement courante utilisée par des outils comme le plugin order de Stylelint et CSScomb :

Ce regroupement est une convention, pas une obligation CSS. Les navigateurs appliquent les déclarations en fonction de la spécificité et de l'ordre source, indépendamment de la position des propriétés dans un bloc de règles. Un formateur se concentre sur les espaces et l'indentation ; le réordonnancement des propriétés est une préoccupation de linting distincte, gérée par des outils comme Stylelint.

Formatage CSS vs. Minification CSS

Le formatage et la minification sont des opérations inverses, appliquées à différentes étapes du développement :

Exemples de code

Comment formater du CSS par programmation dans différents langages et environnements :

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;
//   }

Questions fréquentes