Formateur et embellisseur CSS

À quoi sert un formateur CSS ?

Un formateur CSS prend du code de feuille de style quelle que soit sa forme — minifié sur une seule ligne, indenté de façon irrégulière ou copié depuis les outils de développement du navigateur — et le réécrit avec une mise en page prévisible : le sélecteur, une accolade ouvrante, une déclaration property: value; par ligne, puis l’accolade fermante sur sa propre ligne. Les règles placées dans les blocs @media, @supports et @container reçoivent un niveau d’indentation supplémentaire pour que la structure soit évidente.

La mise en forme est la première étape lorsque vous devez déboguer un thème tiers, relire du CSS dans une pull request ou vous inspirer des styles d’un autre site. Le formateur repose sur js-beautify et fonctionne entièrement dans votre navigateur.

Avant et après

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

devient

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Notez que le formateur n’ajoute ni ne supprime de points-virgules, ne réordonne pas les propriétés et ne modifie pas les valeurs : il ne change que les espaces et les sauts de ligne, de sorte que le résultat se comporte exactement comme l’original.

SCSS, Less et CSS moderne

Les règles imbriquées, les sélecteurs parents &, les variables ($brand, @brand), les mixins et l’imbrication native du CSS sont tous correctement indentés. Les propriétés personnalisées (--brand: #4f46e5), clamp(), :is()/:where() et les couches en cascade (@layer) sont conservés tels quels.

Conventions de style à adopter

• Indentation de deux espaces : c’est le standard de fait dans la plupart des guides de style CSS et la valeur par défaut de Prettier.
• Un sélecteur par ligne dans les sélecteurs groupés rend les diffs plus petits lorsque vous ajoutez ou retirez un sélecteur.
• Une ligne vide entre les règles facilite la lecture des fichiers longs.
• Automatisez la mise en forme : utilisez Prettier ou Stylelint dans votre éditeur et votre CI pour que la mise en forme n’apparaisse jamais dans les revues de code.

Vous passez en production ? Utilisez le CSS Minifier pour voir précisément le nombre d’octets économisés, ou cochez Minify ci-dessus. Pour convertir au passage des valeurs en pixels, essayez le convertisseur PX vers REM.

Aussi recherché comme : beautifier css, formater css, indenter css, mise en forme css, décompresser css, formateur scss, formateur less, embellir code css.

Outils complémentaires : Formateur CSS

• Formateur HTML — Collez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y compris les blocs <style> et <script> intégrés.
• Formateur JavaScript — Rendez lisible du JavaScript, JSON ou JSX avec l'indentation et le style d'accolades de votre choix, ou supprimez espaces et commentaires avec un minifieur vérifié.
• Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
• Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.