Utility-first CSS is een manier van stylen waarbij je een ontwerp bouwt uit veel kleine, eendelige classes in plaats van per component een eigen blok CSS te schrijven. Een class als p-4 voegt padding toe, flex zet een indeling, text-center centreert tekst, en je combineert ze direct in de markup om de gewenste look in elkaar te zetten.
Een handige vergelijking is Lego. Traditionele CSS is alsof je voor elk meubelstuk een speciaal gegoten onderdeel bestelt; utility-first is een doos standaard blokjes die je in eindeloze combinaties aan elkaar klikt. Je verzint geen namen meer als .hero-subtitle-wrapper, maar grijpt elke keer naar dezelfde handvol bouwstenen. Dit past goed bij een gedeeld design system, want de utilities kun je rechtstreeks koppelen aan je design tokens voor kleur, witruimte en letters.
De afweging is eerlijk: je HTML draagt lange rijen classes, wat op het eerste gezicht druk en een beetje lelijk oogt. Daar staat tegenover dat je zelden van bestand wisselt om CSS te schrijven, dat namen nergens in het project botsen, en dat een buildstap elke class weghaalt die je niet echt gebruikte, zodat het bestand dat je bezoekers downloaden klein en snel blijft. Er groeit geen dode stylesheet in een hoekje die niemand nog durft te verwijderen. Tailwind CSS is het framework dat deze stijl mainstream maakte, en TopDevs bouwt juist deze site ermee.
Bij TopDevs leunen we op utility-first CSS zodat het stylen consistent blijft binnen een project en nieuwe developers een layout kunnen lezen en aanpassen zonder een berg eigen stylesheets te ontwarren.
