Bij mijn 4e project kopieerde ik componenten van mijn 3e project en paste ze aan. Halverwege zag niets er meer consistent uit. Knoppen hadden 3 verschillende hoogtes, marges waren willekeurig en ik wist niet meer welke versie de juiste was.
Wat het probleem eigenlijk was
Ik had geen systeem, ik had gewoonten. En gewoonten zonder structuur leiden tot inconsistentie zodra een project groter wordt dan 8 paginas.
Tools die hielpen zonder overweldigend te zijn
Style Dictionary van Amazon is een open-source tool waarmee je design tokens definieert in JSON en ze exporteert naar CSS-variabelen. Ik gebruikte het voor 12 kleuren en 6 typografische schalen. Dat klinkt als extra werk, maar het bespaarde me 3 uur aan zoeken en aanpassen per project.
Storybook is zwaarder, maar de isolated component view loste een concreet probleem op: ik kon een knop testen zonder een hele pagina te laden. Na 2 weken was ik sneller in het spotten van visuele regressies.
Hoe ik het klein hield
Ik begon met 1 bestand: tokens.css. Daarin stonden alleen kleur, ruimte en typografie als variabelen. Geen componenten, geen architectuur. Dat ene bestand maakte mijn volgende project meetbaar consistenter dan de vorige 3 samen.
Een systeem hoeft niet compleet te zijn om nuttig te zijn. Het moet alleen groter zijn dan niets.