La collecte de jetons CSS n’est pas un caprice axé sur la conception ou une esthétique pour l’esthétique. Il s'agit d'une pratique d'ingénierie visant à normaliser les décisions visuelles et à réduire les coûts opérationnels front-end.
Dans cet article, nous aborderons :
- ce que signifient les jetons CSS en termes pratiques ;
- comment ils apparaissent réellement dans des projets du monde réel ;
- quels problèmes la collection de jetons expose ;
- et pourquoi ce processus devrait être automatisé dans le cadre d'un audit.
Que signifient les jetons CSS en pratique
Un token de design associe un nom à une décision, par exemple une couleur ou un espacement. Collecter les valeurs CSS répétées permet de trouver des candidats ; la répétition seule n’en fait pas des tokens. L’inventaire peut inclure :
- couleurs (
#0d6efd,rgb(13,110,253)) - tailles de police (
14px,1rem) - hauteurs de ligne
- espacements (
8px,16px,24px) - rayons de bordure
- ombres, valeurs d'index z, etc.
Exemple illustratif de commerce en ligne :
.button-primary {
background: #005bff;
border-radius: 6px;
}
.checkout-button {
background-color: #005bff;
border-radius: 8px;
}
Les boutons ont la même couleur de fond, mais des rayons d’arrondi différents. Avant d’unifier les valeurs, vérifiez si cette différence est intentionnelle.
Problèmes typiques révélés par la collecte de jetons
1. Fausse diversité
Prenons un exemple pédagogique d’audit SaaS présentant ces valeurs :
- 27 nuances de bleu distinctes
- 19 d’entre elles séparées de 1 à 3 unités RVB
Ces différences peuvent notamment venir de :
- copies manuelles depuis Figma ;
- règles de design non partagées entre équipes ;
- dette technique accumulée.
2. Espacement sans système
Un exemple d'interface d'administration :
margin-bottom: 12px;
margin-bottom: 14px;
margin-bottom: 16px;
margin-bottom: 18px;
La question n’est pas « quel espacement est correct ». La vraie question est pourquoi il y en a quatre.
La collecte de jetons vous permet de :
- visualiser la distribution des valeurs ;
- repérer des groupes similaires ;
- choisir une échelle adaptée, par exemple une grille de 4 ou 8 points.
3. Dérive typographique
Autre exemple pédagogique : un portail d’entreprise avec :
- 11 tailles de police
- 7 valeurs de hauteur de ligne
- 5 épaisseurs de police pour le corps du texte
Un regroupement par usage peut révéler trois rôles typographiques. Vérifiez l’utilisation réelle avant de fusionner les autres valeurs.
Comment fonctionne techniquement la collecte de jetons CSS
Au niveau mécanique, le processus est simple :
- Chargez la page.
- Collectez les styles accessibles, intégrés et externes.
- Analysez les déclarations.
- Regroupez les valeurs par catégorie :
- couleurs
- tailles de police
- espacements
- rayons d’arrondi
- Calculez la fréquence.
Exemple de sortie JSON :
{
"colors": {
"#005bff": 143,
"#ffffff": 98,
"#f5f7fa": 34
},
"spacing": {
"8px": 76,
"16px": 112,
"24px": 41
}
}
Ces comptages étayent l’analyse. La fréquence seule ne détermine ni le sens d’une valeur ni sa priorité.
Pourquoi une approche manuelle n'est pas évolutive
À un stade précoce, les équipes peuvent « se mettre d’accord verbalement ». Au point où vous avez :
- 5+ développeurs ;
- branches de fonctionnalités parallèles ;
- plusieurs sources de conception ;
les accords verbaux deviennent plus difficiles à maintenir.
Sans collecte automatisée de jetons, vous :
- disposez plus difficilement d’un inventaire fiable ;
- comparez moins facilement les effets du refactoring ;
- risquez de manquer des régressions visuelles.
Scénario illustratif : refonte sans arrêt du développement
Imaginons un site marketing d’environ 120 pages. Les chiffres illustrent une migration possible ; ils ne constituent ni un résultat client vérifié ni une prévision :
Avant :
- Plus de 4 000 règles CSS
- 32 couleurs
- 19 tailles de police
Mesures prises :
- Collecter les valeurs sur les pages clés.
- Les trier par fréquence.
- Définir un ensemble de tokens de base.
- Migrer progressivement, sans réécriture complète.
Après :
- 9 couleurs de base
- 6 jetons typographiques
- −18 % de taille CSS
- moins de régressions visuelles lors des tests A/B
Où les gains de performances entrent en jeu
Les jetons CSS ne concernent pas seulement le design :
- regrouper les déclarations en double peut réduire le CSS ;
- partager des valeurs facilite la maintenance ;
- simplifier les règles peut réduire les conflits de cascade ;
- les effets sur gzip/Brotli, la couverture et le CSS critique doivent être mesurés.
La collecte de tokens seule n’accélère pas une page. Comparez les octets transférés et les temps de chargement après la modification du code.
Pourquoi nous traitons cela comme un problème d'audit
Chez milten.io, la collection de jetons CSS est :
- diagnostic, pas un générateur de « jolis rapports » ;
- un moyen d'exposer la structure là où elle semble absente ;
- un point d'entrée vers la normalisation, les systèmes de conception et l'architecture frontale évolutive.
Si les candidats sont difficiles à formaliser, examinez les règles de design et leurs exceptions. Cette difficulté ne prouve pas, à elle seule, l’absence d’un système de design.
Résumé
Réduit à une logique de gestion :
- CSS sans jetons = un actif non géré
- collection de jetons = inventaire
- fréquence = priorités
- automatisation = évolutivité
Sans révision des valeurs communes, de petits ajustements de styles peuvent ajouter de nouvelles incohérences à chaque refonte.
Inventoriez les valeurs utilisées dans votre projet, choisissez des changements justifiés et mesurez leurs effets.