Skalerbar CSS-arkitektur for designsystemer

2025-11-22

Dårlig CSS-arkitektur er en av de vanligste kildene til teknisk gjeld i digitale produkter. Her er metodene som holder koden vedlikeholdbar over tid.

CSS-gjeld akkumuleres fort

I starten av et prosjekt er CSS enkelt. Over tid, med flere bidragsytere og endrede krav, blir det fort et lappeteppe av spesifikke klasser, viktige overrides og dupliserte stiler.

God CSS-arkitektur er ikke et luksusproblem – det er en forutsetning for vedlikeholdbare digitale produkter.

Metodologier: BEM, ITCSS og utility-first

BEM (Block Element Modifier) er en navnekonvensjon som gjør klasser selvforklarende og hierarkisk. ITCSS (Inverted Triangle CSS) organiserer CSS i lag fra generelt til spesifikt, noe som reduserer spesifisitetskonflikter.

Utility-first CSS (Tailwind er det dominerende eksempelet) tar en annen tilnærming: komposisjonen skjer i HTML med små, gjenbrukbare klasser i stedet for store komponentklasser.

CSS Custom Properties som designtokens