En octobre 2020, j’ai pris la décision radicale de repartir de zéro sur l’ensemble des styles CSS de mes sites principaux.
Plus de rustines accumulées au fil des années. Plus de spécificité en cascade incontrôlable. Plus de fichiers qui grossissaient sans logique.
J’ai tout remis à plat.
Pourquoi ce grand ménage ?
Les styles dataient pour certains de plusieurs années.
Ils mélangeaient resets anciens, hacks pour Internet Explorer résiduels, du !important un peu partout, des sélecteurs ultra-spécifiques et beaucoup de redondance.
Le résultat : un code difficile à maintenir, des temps de chargement alourdis par des déclarations inutiles, et des ajustements qui prenaient des heures au lieu de minutes.
Smashing Magazine expliquait à l’époque (dans sa série sur le refactoring CSS de 2021) que l’audit santé du CSS révèle souvent duplication massive, complexité de sélecteurs et code mort – exactement ce que j’observais.
Refactorer progressivement ou tout casser et reconstruire ?
J’ai choisi la seconde option car le volume de dette technique était trop important pour une approche incrémentale sans tout casser à un moment donné.
Ce que ça a changé concrètement
- Fichier CSS global divisé et allégé drastiquement
- Adoption systématique de variables CSS pour couleurs, espacements, typographie
- Utilisation raisonnée de cascades modernes et de :where() / :is() quand pertinent
- Suppression quasi-totale des !important
- Meilleure maintenabilité : ajouter un nouveau composant ne casse presque plus rien ailleurs
- Temps de développement divisé par 2 ou 3 sur les ajustements visuels
Le site est devenu plus rapide à itérer, plus prévisible et – cerise sur le gâteau – un poil plus performant côté Lighthouse (moins de selectors complexes = rendu plus fluide).
Et si c’était votre tour ?
Si votre feuille de style vous fait peur quand vous l’ouvrez, si vous hésitez dix fois avant de toucher une règle, si vous accumulez des classes “override” à la fin du fichier… il est peut-être temps d’envisager la même opération.
Je propose ce type d’audit et de remise à plat CSS pour des sites existants (WordPress, statique, SPA, peu importe la stack).
On regarde ensemble :
- l’état actuel (audit rapide gratuit)
- les gains possibles en performance et maintenabilité
- une stratégie adaptée (refactor progressif ou reset complet)
Plus d’infos et prise de contact directe ici : https://donf.co
Vous avez déjà fait un gros ménage CSS sur un projet mature ? Qu’est-ce qui vous a le plus surpris dans les résultats ?
DonF.co
