compress Minificateur / Formateur CSS star

Comment ça marche

Minifier réduit la taille du fichier en supprimant tout ce dont un analyseur automatique n'a pas besoin mais qu'un lecteur humain apprécierait : commentaires, sauts de ligne, indentation, et le point-virgule final avant une accolade fermante. Rien de tout cela n'a de signification pour la façon dont un navigateur applique les styles — une feuille de style avec chaque règle sur une seule ligne et sans espace se comporte de façon identique à une version joliment mise en forme, simplement plus petite et plus rapide à télécharger. Cela compte en production car le CSS bloque le rendu de la page jusqu'à ce qu'il soit téléchargé et analysé, donc réduire le fichier de quelques kilo-octets améliore directement la vitesse de chargement de la page, surtout sur des connexions lentes.

Formater est l'opération inverse, et elle est réellement plus difficile : elle prend du CSS compressé ou désordonné et le réindente avec une déclaration par ligne, une règle par bloc, un espacement cohérent autour des deux-points et des accolades. C'est une forme de rétro-ingénierie, car la mise en forme d'origine — et surtout les commentaires éventuels — disparaît dès qu'un fichier est minifié ; seule la mise en forme structurelle (quel sélecteur va avec quelles déclarations) peut être récupérée, pas les sauts de ligne ou les notes d'origine de l'auteur. Par exemple, .btn{color:red;padding:8px} devient un bloc correctement indenté avec color: red; et padding: 8px; chacun sur sa propre ligne à l'intérieur de .btn { }.

Ce qu'il faut savoir

• Les deux directions préservent exactement le comportement. Sélecteurs, propriétés, valeurs et ordre de cascade restent intacts — seuls les espaces et les commentaires changent, donc la spécificité et l'héritage fonctionnent de façon identique avant et après.
• C'est un outil léger basé sur des expressions régulières, pas un analyseur CSS complet (comme PostCSS). Il traite correctement le CSS standard, mais les valeurs de contenu contenant des {, } ou ; littéraux entre guillemets (rare en pratique, surtout dans des valeurs content: générées) peuvent ne pas être formatées parfaitement.
• La syntaxe Sass/Less n'est pas traitée. L'imbrication, les variables et les mixins ne sont pas du CSS valide à elles seules, donc elles passent largement inchangées plutôt que d'être compilées — vous aurez toujours besoin de Sass ou Less lui-même pour les transformer d'abord en CSS pur.
• Les commentaires sont la seule chose que la minification élimine définitivement. Si un commentaire documente une astuce spécifique à un navigateur ou un avertissement « ne pas supprimer », conservez une copie de la source non minifiée quelque part — le résultat compressé n'a aucun moyen de la restituer.

Une comparaison concrète : une règle formatée comme .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } se minifie en .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} — nettement plus courte, et sur une feuille de style complète avec des dizaines de règles, de commentaires et de requêtes média imbriquées, cette économie représente typiquement de 20 % à 40 % de la taille du fichier d'origine.