Slik bruker du CSS-variabler for ryddige, raske og fleksible nettsider
CSS-variabler har gått fra å være en avansert teknikk til å bli noe alle som jobber med nettsider bør kjenne til. De gjør stilark mer oversiktlige, enklere å endre og lettere å vedlikeholde over tid.
I denne artikkelen ser vi på hva CSS-variabler er, hvordan du tar dem i bruk på en trygg måte, og hvordan de kan gi deg mer kontroll på design uten at koden vokser ut av kontroll.
Hva er CSS-variabler, egentlig?
CSS-variabler (ofte kalt custom properties) er verdier du kan lagre ett sted og gjenbruke flere steder i stilarket. De skrives med to bindestreker foran navnet, for eksempel–primar-farge.
Variabler defineres vanligvis i:root, som er toppen av dokumentet. Da kan du bruke dem overalt på siden. Et enkelt eksempel:
Eksempel:
CSS:
:root {
–primar-farge: #0f766e;
–sekundar-farge: #f97316;
–standard-padding: 1.5rem;
}
button {
background-color: var(–primar-farge);
padding: var(–standard-padding);
}
Når du vil endre uttrykket på hele siden, trenger du bare å justere verdiene i :root, ikke lete etter alle stedene fargene er brukt.
Hvorfor CSS-variabler gir mer vedlikeholdbare stilark
Uten variabler ender mange prosjekter med spredte verdier for farger, typografi og mellomrom. Litt ulik blå, litt ulik grå, og plutselig er det nesten umulig å oppdatere designet uten å ødelegge noe.
Med CSS-variabler tvinges du til å definere et sett tydelige designbeslutninger: hvilke farger, hvilke fontstørrelser, hvilke avstander. Det gir mer konsekvent design og færre overraskelser når flere jobber i samme kodebase.
Start med et lite “design-tokens”-system
En praktisk tilnærming er å starte med et lite sett variabler som beskriver designet ditt, ofte kalt design-tokens. Dette trenger ikke være komplisert, og kan vokse over tid.
Fokuser på noen få kategorier: farger, typografi og spacing. For eksempel:
Eksempelstruktur:
:root {
/* Farger */
–farge-bakgrunn: #ffffff;
–farge-tekst: #111827;
–farge-primar: #0f766e;
–farge-primar-lys: #14b8a6;
–farge-feil: #dc2626;
/* Typografi */
–font-base: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
–font-storrelse-sm: 0.875rem;
–font-storrelse-base: 1rem;
–font-storrelse-lg: 1.125rem;
/* Spacing */
–space-xs: 0.25rem;
–space-sm: 0.5rem;
–space-md: 1rem;
–space-lg: 1.5rem;
}
Poenget er ikke å ha flest mulig variabler, men å ha et fornuftig, gjenkjennelig sett som dekker de vanligste behovene.
Navngiving som faktisk hjelper deg senere
Mange støter på problemer fordi variabelnavnene enten er for vage eller for konkrete.–blaer lite framtidsrettet, men–knapp-farge-venstre-hjorneer altfor detaljert.
En nyttig regel er å navngi etter rolle, ikke eksakt utseende. For eksempel:
- Bra:–farge-primar,–farge-link,–farge-bakgrunn-kort
- Mindre bra:–bla,–rosa-lys,–tekst-18px
Når du skifter fargepalett, kan du da endre definisjonene uten å måtte bytte alle variabelnavn i HTML og CSS.
Mørk og lys modus med nesten ingen ekstra CSS
En av de mest praktiske bruksområdene for CSS-variabler er temaer: for eksempel lys og mørk modus. I stedet for å skrive nye regler for alt innhold, endrer du bare variablene under et annet scope.
Et enkelt mønster kan se slik ut:
CSS:
:root {
–farge-bakgrunn: #ffffff;
–farge-tekst: #111827;
}
[data-theme=”dark”] {
–farge-bakgrunn: #020617;
–farge-tekst: #e5e7eb;
}
body {
background-color: var(–farge-bakgrunn);
color: var(–farge-tekst);
}
Du kan da skifte tema ved å settedata-theme=”dark”på<html>eller<body>via JavaScript. All typografi og bakgrunn følger automatisk med.
CSS-variabler og JavaScript: justering i sanntid
En annen nyttig egenskap er at CSS-variabler kan leses og endres fra JavaScript mens siden kjører. Det gir deg mulighet til å la brukeren styre ting som fontstørrelse eller layout-tetthet.
Et enkelt eksempel på å endre en variabel fra JavaScript kan være:
JavaScript:
const rot = document.documentElement;
rot.style.setProperty(‘–font-storrelse-base’, ‘1.1rem’);
På den måten kan du for eksempel lage en “større tekst” knapp som faktisk endrer hele typografisystemet, ikke bare et par utvalgte elementer.
Vanlige feil og hvordan unngå dem
Noen typiske snubletråder går igjen når man starter med CSS-variabler. Heldigvis er de enkle å unngå når du vet hva du skal se etter.
Her er noen vanlige feil:
- Definere variabler for sent:Hvis du definerer en variabel inne i en spesifikk klasse, kan du ikke bruke den utenfor. Bruk :root for generelle verdier.
- For mange nesten-like variabler:Om du har–primar,–primar2,–primar-lys,–primar-lys2, mister du oversikten. Rydd jevnlig.
- Kombinere variabler og magiske tall:Hvis du alltid skrivervar(–space-md) 8px, bør kanskje 8px også være en variabel.
Ytelse og støtte i nettlesere
CSS-variabler støttes i moderne nettlesere, både på mobil og desktop. For de fleste vanlige nettsteder er det tilstrekkelig å anta at besøkende har oppdatert nettleser, men hvis du utvikler for svært krevende miljøer bør du teste selv.
Når det gjelder ytelse, er det sjelden variabler i seg selv som skaper problemer. Det som kan gi dårlig ytelse er kompliserte layoutberegninger, tunge animasjoner eller store DOM-trær. CSS-variabler erstatter bare verdier, og er stort sett lette å håndtere for nettleseren.
Slik kommer du i gang i et eksisterende prosjekt
Hvis du allerede har en nettside i drift, trenger du ikke skrive om alt for å begynne å bruke CSS-variabler. Start heller i det små og flytt over gradvis der gevinsten er størst.
En trinnvis tilnærming kan være:
- Samle alle farger som faktisk brukes i prosjektet.
- Definer et lite sett fargevariabler i :root.
- Bytt ut hardkodede fargverdier med variabler der de passer naturlig.
- Gjør det samme for fontstørrelser og spacing når du ser mønstre.
Etter hvert vil du oppdage at stilarket ditt får mer struktur, og at det blir langt tryggere å gjøre designendringer uten at noe uventet bryter.
0 kommentarer