Récemment, j'ai dîné avec quelques amis développeurs front-end, et la conversation a vite tourné autour de l'IA qui écrit du code. Un des gars a soupiré : « Avec Copilot ou Cursor, en quelques minutes tu peux générer une structure de page, et même la logique est écrite au passage. » Un autre a enchaîné : « Oui, mais chaque fois que je récupère du CSS écrit par quelqu'un d'autre ou généré par l'IA, c'est un cauchemar — l'indentation est en pagaille, on dirait qu'un chat s'est amusé avec, les espaces en trop ou manquants c'est la loterie, parfois une ligne fait des centaines de caractères, et pour trouver une valeur de couleur il faut chercher avec Ctrl+F pendant des heures. »
Je suis tout à fait d'accord. L'IA a certes accéléré l'écriture du code, mais pour le CSS, elle a souvent tendance à mettre le bazar. Pourquoi ? Parce que quand l'IA génère du CSS, elle se soucie seulement que « ça fonctionne », pas de la façon dont tu vas maintenir ça ensuite. Tu lui demandes une mise en page responsive, elle te sort bien les media queries, mais l'imbrication des sélecteurs, l'ordre des propriétés, les retours à la ligne et l'indentation, tout dépend de son humeur du moment. Résultat : tu copies-colles dans ton projet, le style de code ne correspond pas aux normes de l'équipe, et tu te fais allumer par tes collègues lors de la revue de code.
C'est là qu'il faut mettre les mains dans le cambouis. J'ai déjà essayé de tout ajuster manuellement, ligne par ligne, en corrigeant l'indentation, en supprimant les espaces superflus, en dépliant le code compressé, en fusionnant le code éparpillé. Après une demi-heure, j'avais les yeux explosés, et j'ai fini par modifier une valeur de propriété par erreur, ce qui a fait planter la page. Ensuite, j'ai compris : utilisons directement des outils.
Le formatage et la compression CSS, ça semble être la même chose, mais en fait ce sont deux directions opposées. Le formatage consiste à redéployer du code compressé et entassé, en ajoutant une indentation et des retours à la ligne raisonnables pour le rendre lisible ; la compression, c'est l'inverse : on supprime tous les espaces, retours à la ligne et commentaires possibles pour réduire au maximum la taille du fichier et accélérer le chargement. Ces deux opérations, les faire à la main, c'est juste se punir soi-même.
Actuellement, j'utilise un outil en ligne de formatage et compression CSS. Pas besoin d'installer un logiciel, j'ouvre la page web, je colle le code, je clique sur un bouton, à gauche le code original, à droite le résultat. Si je veux formater, je choisis le mode formatage : il aligne automatiquement le code, une ligne vide entre les sélecteurs, deux espaces d'indentation devant les propriétés, un espace après les deux-points, c'est agréable à regarder. Si je veux compresser, je passe en mode compression : il enlève les commentaires, supprime les retours à la ligne, avale les espaces superflus, et te donne une ligne de code compacte, prête à être mise en production sans problème.
Le plus important, c'est que cet outil n'est pas difficile. Le code que tu copies depuis l'IA, peu importe à quel point il est en désordre, il peut le remettre en ordre. Parfois, je récupère du CSS de projets open source sur GitHub, les styles sont très variés, certains utilisent des tabulations, d'autres des espaces, l'ordre des propriétés est parfois chaotique ; je le passe dans l'outil, et en sortie j'ai un style uniforme, ce qui m'économise un temps fou.
Certains diront peut-être : « Mon éditeur a déjà un formateur intégré, non ? » C'est vrai, VS Code a Prettier, WebStorm a aussi le sien. Mais le problème, c'est que tout le monde n'a pas configuré son environnement. Parfois, tu modifies quelque chose temporairement sur l'ordinateur de quelqu'un d'autre, ou tu écris du code dans un IDE en ligne, et ce n'est pas pratique. Et la configuration de Prettier peut être pénible, différente selon les projets, et si ça se trouve, après le formatage, ça provoque des erreurs. Les outils en ligne n'ont pas ces soucis : tu ouvres, tu utilises, tu pars.
Un autre point : l'IA écrit du code de plus en plus vite, ce qui signifie qu'on récupère de plus en plus de code écrit par d'autres. Avant, un projet était écrit par quelques personnes, maintenant avec l'IA, le style de code est encore moins contrôlable. Dans ce cas, un outil de formatage et compression pratique, c'est comme l'évier dans la cuisine : ça n'a pas l'air impressionnant, mais sans lui, on ne peut pas s'en sortir.
Au fond, l'IA est là pour t'aider à travailler, pas pour ranger ta maison. Elle peut écrire les fonctionnalités, mais la propreté du code, ça dépend de toi. Plutôt que de perdre du temps à te battre avec du CSS en désordre, trouve un outil fiable et règle ça en quelques secondes. Le temps gagné, tu peux le passer à boire un café, ou à écrire deux composants de plus, non ?