Lea Verou propose de traiter les icônes d’interface comme des design tokens gérés en CSS, plutôt que de multiplier les SVG inline dans le HTML. Son approche repose sur des variables personnalisées, des pseudo-éléments et des masques CSS, avec des propriétés comme --icon, --icon-start ou --icon-end. Elle met en avant une meilleure cohérence, moins de boilerplate, des adaptations réactives aux états, thèmes et media queries, tout en conservant une solution de repli pour les navigateurs plus anciens.
Des noms clairs et cohérents pour les composants d’interface, fonctionnalités et variables facilitent la collaboration et la compréhension des utilisateurs. Vitaly Friedman recommande de partir du vocabulaire des utilisateurs et du bénéfice attendu, plutôt que de termes internes ou trop génériques. Il rassemble des guides et outils pour nommer composants, couleurs et design tokens, notamment des taxonomies structurées. Un langage partagé entre design, développement et produit réduit les ambiguïtés et peut améliorer l’adoption des fonctionnalités.
Il s'agit plus d'une compilation de liens en rapport avec le nommage
Tout est dans le titre
L'auteur présente l'intérêt des "Design Tokens" : stocker les paramètres fondamentaux (typographie, couleurs, etc.) dans un fichier commun