Pourquoi des classes utilitaires

Ouvrez le main.css d'un projet vieux de deux ans. Il fait 4 200 lignes. Vous y trouvez .card, puis .card--compact, puis .card--compact-sidebar, et enfin un .sidebar .card--compact { padding: 12px !important; } ajouté un vendredi soir. Votre tâche du jour est de réduire la marge intérieure d'une carte, sur une seule page. Vous ne savez pas qui utilise .card--compact ailleurs : la recherche plein texte remonte onze gabarits, et vous n'avez aucun moyen de vérifier autrement qu'en ouvrant toutes les pages du site. Alors vous n'y touchez pas. Vous ajoutez une douzième règle, avec un nom un peu plus précis, et le fichier grossit encore.

Ce n'est pas un défaut de discipline, c'est une propriété du langage. Le CSS a une portée globale et aucun ramasse-miettes : rien ne vous signale qu'une règle est morte, rien ne vous empêche d'en écrire une qui en écrase une autre à distance, et la spécificité transforme chaque correctif en surenchère. Une feuille de style se comporte comme une variable globale partagée par toutes les pages, modifiable de partout, sans test de non-régression. Au bout de deux ans, la seule opération dont vous êtes certain qu'elle ne cassera rien est l'ajout. C'est exactement pour cette raison que ces fichiers ne rétrécissent jamais.