Formateur et embellisseur CSS, gratuit

Ce que fait réellement le formatage CSS

Un formateur CSS (aussi appelé « beautifier » ou « pretty-printer ») prend du CSS sous toutes ses formes, sortie de production minifiée, fragments d’une seule ligne collés depuis l’inspecteur d’un navigateur, feuilles de styles écrites à la main avec une indentation incohérente, et le réémet avec une indentation conventionnelle, des sauts de ligne et un formatage cohérent des sélecteurs et des déclarations. L’analyseur CSS du navigateur ignore les espaces blancs au moment du parsing, donc la page rendue a un aspect identique quelle que soit la mise en forme du source. Le but est purement la lisibilité humaine : la hiérarchie indentée rend visible l’imbrication des @media, une propriété par ligne permet à l’œil de parcourir rapidement les déclarations d’une règle, et un formatage cohérent dans tout un dépôt accélère la revue des diffs. Les quatre flux de travail réels : (1) déboguer du CSS minifié de production collé depuis l’Inspecteur des DevTools pour comprendre pourquoi une règle ne s’applique pas ; (2) reformater du CSS extrait du panneau « Computed » d’un navigateur pour le comparer à la source ; (3) normaliser des différences de formatage d’équipe après une fusion venant d’un contributeur qui utilise d’autres conventions ; (4) préparer du CSS pour la revue de code lorsque la source s’est dégradée en lignes compactes.

Les principaux formateurs CSS

js-beautify (Einar Lielmanis, depuis 2007) est le formateur historique de l’écosystème JavaScript, sa moitié CSS est ce qui alimente la façade publique de beautifier.io et a historiquement fait tourner des dizaines de sites « format CSS online ». Prettier (James Long, janvier 2017 ; support CSS ajouté en v1.4 le 3 juin 2017) est le formateur « opinionated » qui en est venu à dominer l’écosystème frontend moderne. La philosophie de design de Prettier est « presque aucune configuration », un seul style d’indentation (2 espaces par défaut), une seule cible de largeur de ligne, un retour à la ligne prévisible. C’est le formateur par défaut pour le CSS dans VS Code lorsque l’extension Prettier est installée. Stylelint (David Clark + Maxime Thirouin, 2015) est plus un linter qu’un formateur, mais prend en charge le format-on-save via l’option --fix et est le choix de fait pour faire respecter les conventions CSS au sein d’une équipe, ses plus de 100 règles intégrées couvrent tout depuis « pas de sélecteurs en double » jusqu’à « préférer hex à rgb() » en passant par « guillemets simples uniquement ». clean-css (Jakub Pawlowicz, 2011) minifie principalement, mais a un mode « beautify » qui inverse l’opération. Tous les quatre passent finalement le CSS par PostCSS (Andrey Sitnik, lancé le 7 septembre 2013), l’analyseur CSS universel qui alimente la majeure partie de l’écosystème CSS moderne (Autoprefixer, cssnano, le traitement de Tailwind). Pour les projets modernes en 2026, Prettier au save est la valeur par défaut ; cet outil dans le navigateur est destiné aux cas ponctuels en dehors de tout contexte de projet.

Conventions d’indentation et de sélecteurs

Les conventions CSS en 2026 penchent fortement vers une indentation à 2 espaces, la valeur par défaut dans Prettier, le source de Tailwind, le Code Guide de Bootstrap, le Google CSS Style Guide et la plupart des paquets CSS publiés sur npm. La convention plus ancienne à 4 espaces persiste dans certains codebases hérités. Les tabulations sont rares en CSS spécifiquement (plus courantes en JS/TS). Pour les sélecteurs : les listes de sélecteurs séparées par des virgules sont conventionnellement écrites à raison d’une par ligne (.btn,<br>.btn-primary,<br>.btn-secondary {), ce qui rend facile l’ajout ou la suppression d’un sélecteur sans réécouler la ligne. Les combinateurs (>, +, ~) ont typiquement un espace de chaque côté. Les chaînes de pseudo-classes (:hover:focus) restent serrées. Les sélecteurs universels (*) et les combinateurs de descendance (l’espace implicite) sont neutres pour le formateur.

Formatage des déclarations

Une déclaration par ligne est la valeur par défaut moderne, color: red; sur sa propre ligne, padding: 10px; sur la suivante. L’alternative « compacte » (plusieurs déclarations sur une même ligne) est rare dans le CSS de production aujourd’hui ; la plupart des équipes sont passées à une-par-ligne pour la lisibilité et des diffs propres. Un seul espace après les deux points : color: red; et non color:red;. Point-virgule final sur la dernière déclaration : techniquement optionnel selon la spec CSS, mais chaque formateur moderne l’inclut pour la convivialité des diffs, ajouter une nouvelle propriété ne nécessite pas de modifier la ligne précédente. Ligne vide entre les règles : optionnelle et dépendante de l’équipe. Prettier conserve les lignes vides présentes dans l’entrée plutôt que d’imposer un style spécifique. Mise entre guillemets des propriétés : les noms de polices avec espaces exigent des guillemets (font-family: "Helvetica Neue", sans-serif;) ; les URL sont conventionnellement entre guillemets (url("image.png")) bien que sans guillemets soit valide. Normalisation de valeurs : mots-clés en minuscules (RED → red), abréviation hexa (#FFFFFF → #fff), suppression d’unité zéro (0px → 0), la plupart relèvent davantage d’un minifieur que d’un formateur, mais certains formateurs appliquent celles qui sont sans perte.

Cas CSS particuliers

Les requêtes @media imbriquent leurs règles avec un niveau d’indentation supplémentaire, rendant la structure conditionnelle visuellement évidente. Les blocs @keyframes contiennent des règles en pourcentage (0% { ... }, 100% { ... }) qui s’imbriquent de la même façon. Les déclarations @font-face ont plusieurs couples src/format qui gagnent à être un par ligne. Les propriétés CSS personnalisées (--brand-color: #3b82f6;) sont formatées comme n’importe quelle autre déclaration, mais le nom de propriété conserve la casse (les noms de propriétés personnalisées sont sensibles à la casse, contrairement aux propriétés standard). Les expressions calc() exigent des espaces autour des opérateurs, calc(100% - 20px) est correct, calc(100%-20px) est du CSS invalide. Les formateurs préservent les espaces nécessaires à l’intérieur de calc() tout en normalisant le contexte environnant. Le CSS Nesting (CSS Nesting Module Level 1, baseline 2023+) (une fonctionnalité relativement nouvelle qui permet aux règles imbriquées de s’indenter sous leur parent) a changé la façon dont les formateurs traitent la syntaxe imbriquée ; Prettier moderne et Stylelint comprennent tous deux la syntaxe native.

Trier les propriétés, une convention étonnamment contestée

Certaines équipes imposent un ordre des propriétés à l’intérieur de chaque règle. Trois conventions se disputent. Alphabétique (la bascule « Trier les propriétés » de cet outil) : la plus simple, facile à imposer mécaniquement, transforme « la propriété X est-elle déjà déclarée ici ? » en un balayage rapide. Le Google CSS Style Guide recommande l’ordre alphabétique avec des concessions pour les préfixes vendeurs. Par concept (positionnement → boîte → typographie → visuel → animation) : groupe les propriétés liées. Le livre d’architecture SMACSS a popularisé cette approche. Par type (display d’abord, puis boîte, puis texte, puis divers) : une variante du « par concept » avec des regroupements plus rigides. La règle order/properties-order de Stylelint prend en charge n’importe laquelle d’entre elles via la configuration. Aucune des trois n’améliore le rendu ; le choix dépend purement du modèle mental que vous trouvez plus facile lors du balayage d’une règle. Cet outil propose le tri alphabétique en option ; pour les autres conventions, il faudrait un fichier de configuration Stylelint dans un vrai projet.

Le pipeline CSS moderne

Pour les projets dotés d’un pipeline de build, la valeur par défaut en 2026 est Prettier qui s’exécute au save dans votre éditeur et Stylelint à chaque commit via Husky + lint-staged. VS Code embarque Prettier comme formateur par défaut pour les fichiers CSS, SCSS et LESS lorsque l’extension est installée. Les hooks pré-commit via Husky exécutent Stylelint et Prettier sur les fichiers indexés avant d’autoriser le commit. Les vérifications CI exécutent stylelint --check et prettier --check sur les pull requests. Après le formatage en développement, le CSS de production passe par cssnano (basé sur PostCSS, le standard moderne de minification) qui inverse tout ce que le formateur a fait pour produire des octets compressés destinés à être livrés. Rien de tout cela n’importe pour des fragments ponctuels collés d’ailleurs, c’est exactement à cela que sert cet outil dans le navigateur. Pour le travail de projet à long terme, mettez en place Prettier + Stylelint en local ; l’outil dans le navigateur est l’option sans friction pour tout le reste.

Cas d’usage courants

• Revue de code. Rendre lisible du CSS minifié ou compact avant de le partager avec un collègue.
• Débogage. Du CSS correctement formaté rend instantanément visible quels sélecteurs s’appliquent et quelles déclarations sont écrasées.
• Refactorisation. Comprendre la structure d’une feuille de styles que vous n’avez pas écrite est bien plus facile avec un formatage cohérent.
• Nettoyage de l’inspecteur du navigateur. Le bouton « Copier la règle » des DevTools produit du CSS compact et difficile à lire ; formatez-le avant de le coller dans votre feuille de styles.
• Minification de production. La bascule « Mode minify » inverse le formatage, utile pour déployer du CSS en production où chaque octet compte.
• Standardisation d’équipe. Aligner sur les conventions de formatage de l’équipe avant de soumettre une PR.

Confidentialité : pourquoi le tout-navigateur compte ici

Le CSS contient rarement des secrets explicites, mais les feuilles de styles propriétaires révèlent des informations sur la taxonomie interne des classes d’un site, les tokens du design system, les hypothèses de tests A/B encodées dans les noms de sélecteurs, et des fonctionnalités non livrées. Les formateurs côté serveur téléversent votre CSS vers un service tiers où il reste dans des journaux. Cet outil tourne entièrement dans votre navigateur via JavaScript, vérifiez dans l’onglet Réseau des DevTools pendant que vous cliquez sur Format, ou mettez la page hors ligne (mode avion) après son chargement et le formateur fonctionne toujours. Sûr pour des feuilles de styles propriétaires, des fichiers sources de vérité d’un design system, des variantes de tests A/B ou tout CSS que vous ne voudriez pas voir copié sur le disque dur d’un inconnu.

Questions fréquentes

Qu’est-ce que la beautification CSS ?

La beautification (aussi « formatage » ou « pretty-printing ») reformate le source CSS pour le rendre plus lisible, en ajoutant une indentation correcte, des sauts de ligne entre les règles, des déclarations à raison d’une par ligne, un espacement cohérent autour des deux points. Le rendu navigateur est identique parce que l’analyseur CSS ignore les espaces blancs au moment du parsing. L’objectif est la lisibilité humaine pour la revue de code, le débogage et l’édition, pas un changement de l’apparence de la page.

Quand utiliser du CSS minifié ?

Le CSS minifié élimine tous les espaces blancs inutiles et est le bon choix pour le déploiement en production, il réduit la taille du fichier de 20 à 40 % avant la compression Brotli au bord du CDN, et chaque octet retiré du chemin de rendu critique compte pour les Core Web Vitals (LCP en particulier). Le CSS beautifié est pour le développement, la revue de code et le débogage. Les pipelines de build modernes (Vite, webpack, Parcel, Astro, Next.js) minifient automatiquement lors des builds de production via cssnano ou Lightning CSS, donc pour le travail de projet vous écrivez généralement du CSS beautifié et votre bundler émet la version minifiée.

Que fait « trier les propriétés alphabétiquement » ?

Cela classe alphabétiquement les déclarations à l’intérieur de chaque règle, border avant color avant display avant margin. Certaines équipes imposent l’ordre alphabétique parce que cela transforme « X est-elle déjà déclarée ici ? » en un balayage rapide et évite les discussions sur des propriétés en double en revue de code. Le Google CSS Style Guide recommande l’ordre alphabétique (avec des concessions pour les préfixes vendeurs). D’autres équipes préfèrent un ordre « par concept » (positionnement → boîte → typographie → visuel → animation, popularisé par SMACSS). Aucun de ces ordres n’affecte le rendu, choix purement esthétique / convention d’équipe.

Que fait « une propriété par ligne » ?

Cela met chaque déclaration sur sa propre ligne, color: red; sur une ligne, padding: 10px; sur la suivante, plutôt que de les empiler sur une seule ligne. La valeur par défaut moderne dans essentiellement tout CSS de production, parce que cela rend les diffs plus propres (ajouter une propriété = ajouter une ligne, pas en modifier une) et rend chaque déclaration plus facile à lire individuellement. L’inverse (plusieurs déclarations par ligne) est rare dans le code de production en 2026 en dehors de fragments très compacts d’une seule règle.

Faut-il l’utiliser si mon projet utilise déjà Prettier ou Stylelint ?

Probablement pas, l’intégration Prettier de votre éditeur le fait déjà au save, avec une pleine conscience de l’AST CSS via PostCSS, et Stylelint impose les conventions d’équipe à chaque commit. Cet outil est pour les cas que votre pipeline de build ne couvre pas : du CSS collé depuis l’inspecteur d’un navigateur, des fragments venus d’un e-mail ou de Stack Overflow, du formatage ponctuel hors de tout contexte de projet. Pour le travail de projet à long terme, mettez en place Prettier + Stylelint en local ; pour du travail ponctuel sans friction, cet outil est la bonne forme.

Mes fichiers CSS sont-ils téléversés ?

Non. Le formatage tourne entièrement dans votre navigateur via JavaScript. Le CSS que vous collez ne traverse jamais le réseau, vérifiez dans l’onglet Réseau des DevTools pendant que vous cliquez sur Format, ou mettez la page hors ligne (mode avion) après son chargement et l’outil fonctionne toujours. Sûr pour des feuilles de styles propriétaires, des fichiers sources de vérité d’un design system, des variantes de tests A/B ou tout CSS que vous ne voudriez pas voir copié sur le disque dur d’un inconnu.

Outils associés