CSS-variabler i praksis: slik får du mer fleksible og ryddige stilark
CSS har gått fra å være en samling løse regler til å bli et språk der du faktisk kan jobbe mer systematisk. En av de viktigste puslebitene er CSS-variabler, også kalt custom properties.
For deg som lager eller vedlikeholder nettsteder betyr dette mindre manuelt arbeid, færre feil og enklere endringer når designet skal justeres. Her får du en praktisk innføring med fokus på konkrete eksempler du kan ta i bruk med en gang.
Hva er CSS-variabler, egentlig?
CSS-variabler lar deg gi et navn til en verdi, for eksempel en farge eller en spacing, og så gjenbruke den overalt i stilarket. Når du endrer verdien ett sted, oppdateres alle steder der den er i bruk.
De defineres med to bindestreker og brukes med funksjonenvar(). Enkelt eksempel:
Eksempel:
CSS:
:root {
--primary-color: #2563eb;
--spacing-md: 1.5rem;
}
button {
background-color: var(--primary-color);
padding: var(--spacing-md);
}
Her har du et tydelig navn på både farge og avstand. Trenger du en ny blåfarge senere, endrer du kun verdien på–primary-color.
Hvorfor CSS-variabler gir mer vedlikeholdbar kode
Uten variabler er det vanlig å lime inn samme fargekode eller marginverdi mange steder. Over tid blir det vanskelig å vite hvilke verdier som faktisk brukes, og hva som er trygt å endre.
Med variabler kan du tenke mer som i et designsystem. Du definerer grunnverdier for farger, typografi og spacing, og bygger resten av stilene oppå disse.
Noen konkrete fordeler:
- Rask endring av fargepalett eller spacing uten å søke gjennom hele kodebasen.
- Mindre risiko for små avvik, som nesten-like farger og tilfeldige marginer.
- Enklere å samarbeide, fordi navnene på variablene forklarer intensjonen bak verdien.
God plassering: bruk :root og lokale variabler
Som regel defineres globale variabler på:root, som representerer dokumentet som helhet. Disse gjelder på hele siden, med mindre de overstyres lokalt.
Eksempel på globale variabler:
:root {
--color-bg: #ffffff;
--color-text: #111827;
--color-accent: #ec4899;
--font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--radius-md: 0.5rem;
}
I tillegg kan du definere variabler på komponentnivå. Da gjelder de bare innenfor et visst område, og kan tilpasses uten å påvirke resten av siden.
Eksempel på lokale variabler:
.card {
--card-bg: #f9fafb;
--card-padding: 1.5rem;
background-color: var(--card-bg);
padding: var(--card-padding);
border-radius: var(--radius-md);
}
Tematisering: lys og mørk modus uten kaos
En av de mest praktiske bruksområdene for CSS-variabler er tematisering, for eksempel lys og mørk modus. I stedet for å duplisere hele stilsettet, endrer du bare verdiene.
Grunnoppsett:
:root {
--color-bg: #ffffff;
--color-text: #111827;
--color-surface: #f3f4f6;
}
[data-theme="dark"] {
--color-bg: #020617;
--color-text: #e5e7eb;
--color-surface: #111827;
}
Når du så bruker disse variablene på kroppen av siden:
body {
background-color: var(--color-bg);
color: var(--color-text);
}
kan du bytte tema ved ganske enkelt å legge til eller fjernedata-theme=”dark”på<html>eller<body>. JavaScript-delen kan holdes kort og ryddig, og CSS-en forblir lett å lese.
Variabler, media queries og responsivt design
CSS-variabler fungerer godt sammen med media queries. I stedet for å skrive om alle reglene for mindre skjermer, kan du justere verdiene.
Eksempel på responsiv spacing:
:root {
--spacing-section: 4rem;
}
@media (max-width: 768px) {
:root {
--spacing-section: 2.5rem;
}
}
section {
padding-block: var(--spacing-section);
}
Nå endrer du vertikal luft for alle seksjoner på tvers av siden ved å justere én variabel per breakpoint. Det gir en mer konsistent opplevelse, og du slipper mange små spesialtilfeller.
Tilgjengelighet: gjør justeringer enklere
Tilgjengelighet handler ofte om å kunne justere kontrast, fontstørrelser og avstand uten å ødelegge helheten. Variabler kan gjøre det enklere å tilby tilpasninger, for eksempel en “høy kontrast”-variant.
Eksempel:
:root {
--color-link: #1d4ed8;
--color-link-hover: #1e40af;
}
[data-contrast="high"] {
--color-link: #0ea5e9;
--color-link-hover: #0369a1;
}
Kombinert med en enkel innstilling i grensesnittet kan brukeren skru på høyere kontrast, og du har tydelig kontroll over hvilke deler av designet som påvirkes.
Vanlige feil og hvordan du unngår dem
Selv om syntaksen er ganske rett frem, er det noen klassiske snubletråder som ofte dukker opp når man starter med CSS-variabler.
- Stavefeil i navn:Variabler er følsomme for stavemåte. Hold deg til et konsistent mønster, for eksempel–color-*,–space-*,–font-*.
- Manglende fallback:Bruk fallback ivar()der det er ekstra viktig, for eksempel
color: var(--color-text, #111827);. - For detaljerte variabler:Unngå å lage en egen variabel for hvert eneste tall. Tenk på variabler som design-tokens, ikke som en kopi av alle verdier du noen gang setter.
En enkel strategi for å komme i gang
Du trenger ikke skrive om hele prosjektet for å dra nytte av CSS-variabler. Start med små, men synlige gevinster, og bygg videre derfra.
- Identifiser de 5–10 mest brukte fargene og avstandene i dagens stilark.
- Definer dem på:rootmed tydelige navn.
- Bytt ut verdiene gradvis der de forekommer, og test underveis.
- Flytt komponentspesifikke variasjoner inn som lokale variabler der det gir mening.
Etter hvert kan du samle variablene i tydelige seksjoner, for eksempel farger, typografi, spacing og komponentspesifikke tokens. Det gir et mer forutsigbart stilark som tåler videre vekst.
Når bør du ikke bruke variabler?
CSS-variabler er ikke et mål i seg selv. De gir mest verdi på ting som faktisk går igjen og som er sentrale for designet. Engangsverdier og små justeringer trenger ikke egne navn.
Hvis alt blir til en variabel, blir koden tung å lese. Balansen ligger i å navngi de verdiene som beskriver det visuelle språket ditt, ikke hver enkelt linje i layouten.
Brukt med omhu gjør CSS-variabler det enklere å få konsistente, fleksible og mer profesjonelle stilark, også i små prosjekter.
0 kommentarer