CSS-variabler i praksis: slik gir du designet struktur uten kaos i stilarkene
CSS vokser fortere enn de fleste prosjekter tåler, spesielt når farger, mellomrom og typografi sprer seg i hundrevis av linjer med duplisert kode. Små endringer blir plutselig til store ryddejobber.
CSS-variabler gir en ryddig måte å samle designvalgene på ett sted. Med noen få grep kan du få mer konsistente sider, enklere vedlikehold og mindre risiko for visuelle feil.
Hva er CSS-variabler og hvorfor bry seg?
CSS-variabler (ofte kalt custom properties) er navngitte verdier du kan gjenbruke i stilarket. De defineres med–navnog hentes ut medvar().
En enkel definisjon kan se slik ut:
Eksempel:
Definisjon i :root
Dette legges typisk øverst i stilarket:
CSS
:root {
–primary-color: #0055ff;
–spacing-md: 1.5rem;
–font-base: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
}
Bruk senere i CSS
button {
background-color: var(–primary-color);
padding: var(–spacing-md);
font-family: var(–font-base);
}
Fordeler du merker i hverdagen
Den største gevinsten er ikke at koden ser penere ut, men at endringer tar sekunder i stedet for timer. Endrer du merkevarefargen, justerer du én variabel i stedet for å jakte på alle forekomster i prosjektet.
Variabler hjelper også teamet å holde seg til samme visuelle språk: samme gråtoner, samme mellomrom, samme tekststørrelser. Det reduserer små inkonsistenser som ofte sniker seg inn når flere jobber på samme stilark.
Slik organiserer du et enkelt design-tokensystem
En nyttig måte å tenke på CSS-variabler er som små “design-tokens”: navngitte byggesteiner for farge, typografi og spacing. Start enkelt og utvid ved behov.
En praktisk inndeling kan være:
- Farger (primær, sekundær, bakgrunn, tekst)
- Typografi (basisfont, overskrifter, størrelser, linjehøyder)
- Spacing (små, medium, store mellomrom)
- Radius, skygger og grenser
Eksempel på struktur i :root
CSS
:root {
/* Farger */
–color-primary: #0055ff;
–color-primary-dark: #003bb3;
–color-bg: #ffffff;
–color-text: #222222;
–color-border: #dddddd;
/* Typografi */
–font-base: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
–font-size-base: 16px;
–font-size-sm: 14px;
–font-size-lg: 20px;
/* Spacing */
–space-xs: 0.25rem;
–space-sm: 0.5rem;
–space-md: 1rem;
–space-lg: 1.5rem;
–space-xl: 2rem;
/* Annet */
–radius-sm: 4px;
–radius-md: 8px;
}
Gi komponenter faste rammer
Med et sett variabler kan du definere knapper, kort og navigasjon uten å “finne opp” nye verdier hver gang. Det gir en mer samlet stil uten at du trenger et stort rammeverk.
Eksempel: knappestiler med tokens
CSS
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(–space-sm) var(–space-md);
background-color: var(–color-primary);
color: #fff;
border-radius: var(–radius-md);
font-family: var(–font-base);
font-size: var(–font-size-base);
}
.button–secondary {
background-color: transparent;
color: var(–color-primary);
border: 1px solid var(–color-primary);
}
Mørk modus og temaer med minimale grep
En stor styrke ved CSS-variabler er at de kan overstyres lenger ned i kaskaden. Det gjør det relativt rett fram å legge til mørk modus eller spesielle seksjonstemaer.
Du kan for eksempel definere standardtema i:rootog mørkt tema i en klasse på<html>eller<body>.
Eksempel: lys og mørk modus
CSS
:root {
–color-bg: #ffffff;
–color-text: #111111;
–color-surface: #f5f5f5;
}
.theme-dark {
–color-bg: #050505;
–color-text: #f5f5f5;
–color-surface: #1a1a1a;
}
body {
background-color: var(–color-bg);
color: var(–color-text);
}
.card {
background-color: var(–color-surface);
}
Vanlige feil du bør unngå
En typisk felle er å lage for mange varianter for tidlig. Hvis du har ti blåfarger og tolv spacing-varianter uten tydelig mening, blir systemet en belastning i stedet for en hjelp.
Start derfor med et lite sett verdier. Når du merker reell behov for nye nyanser eller størrelser, kan du legge dem til med klare navn som skiller dem fra eksisterende varianter.
Naming som faktisk gir mening
Unngå abstrakte navn som–blue-1og–blue-2eller–spacing-42. Knytt heller navnene til bruken:
- –color-linki stedet for–blue-3
- –space-sectioni stedet for–space-xxl
- –font-size-h1i stedet for–font-size-32
Da er det lettere for nye utviklere (og deg selv om seks måneder) å forstå hva som er riktig å bruke hvor.
CSS-variabler og responsivt design
Variabler kan også oppdateres inne i media queries. Det gjør det enklere å holde samme “logikk” for spacing og typografi på tvers av skjermstørrelser.
Eksempel: skalerende spacing og typografi
CSS
:root {
–font-size-base: 16px;
–space-md: 1rem;
}
@media (min-width: 768px) {
:root {
–font-size-base: 18px;
–space-md: 1.25rem;
}
}
body {
font-size: var(–font-size-base);
}
.section {
padding: var(–space-md);
}
Slik kommer du i gang i et eksisterende prosjekt
I et prosjekt som allerede er i drift, trenger du ikke skrive alt om på én gang. Du kan gradvis innføre variabler og få nytte underveis.
En forsiktig tilnærming kan være:
- Samle de viktigste fargene og spacing-verdiene du faktisk bruker i dag.
- Definer dem som variabler i:root.
- Bytt ut direkte verdier til variabler etter hvert som du redigerer filer.
- Noter deg når du finner “nye” verdier som ligner, og vurder å standardisere.
Oppsummering: små grep, stor effekt over tid
CSS-variabler gir ikke magisk perfekt design, men de gir et tydelig rammeverk rundt beslutningene du allerede tar. Prosjekter blir mer oversiktlige, og endringer går raskere.
Begynn med noen få farger, spacingverdier og typografi-variabler, og la systemet vokse sammen med nettstedet. Etter en stund vil du trolig lure på hvordan du klarte deg uten.
0 kommentarer