CSS-variabler

Designbeslut i kod

Du har precis fattat ditt viktigaste designbeslut. Du har tre adjektiv, en stilpersonlighet och en färgpalett. I nästa del väljer du dina typsnitt.

Men nu uppstår ett praktiskt problem. Din primärfärg, #0d1b2a, #0057b8, eller vilken hex-kod du valt, ska användas på knappar, rubriker, hover-states, ikoner och kanske tio andra ställen i din CSS. Varje gång du kopierar och klistrar in den riskerar du att missa ett ställe när du senare ändrar dig.

CSS-variabler, formellt custom properties, löser det. Du deklarerar värdet en gång och refererar till det överallt. När du sedan ändrar värdet på det enda stället följer alla andra med automatiskt, du slipper leta rätt på tio hex-koder i filen och hoppas att du hittade alla.

Deklarera och använda

En custom property skapas med dubbelt bindestreck och ett valfritt namn:

:root {
    --primary: #0057b8;
}

Du hämtar värdet med var():

.btn {
    background-color: var(--primary);
}

a {
    color: var(--primary);
}

.highlight {
    border-left: 4px solid var(--primary);
}

Nu används din primärfärg på tre ställen, men den är definierad på exakt ett. Vill du byta från mörkblå till terrakotta ändrar du en enda rad i :root.

Varför inte bara kopiera hex-koden?

.btn {
    background-color: #0057b8;
}
a {
    color: #0057b8;
}
.highlight {
    border-left: 4px solid #0057b8;
}
nav a:hover {
    background-color: #0057b8;
}
.icon {
    fill: #0057b8;
}
.badge {
    background: #0057b8;
}

Jämför det med föregående exempel. Det handlar inte om bekvämlighet (även om det är en bieffekt). Det handlar om att ha ett enda ställe att ändra på. Sex kopierade hex-koder är sex möjligheter att göra fel när du bestämmer dig för att byta färg.

`:root`, där variablerna bor

:root är en pseudoklass som matchar <html>-elementet, alltså trädets rot. CSS-variabler ärvs precis som vanliga CSS-egenskaper nedåt i trädet, och eftersom :root är förälder till allt på sidan är variablerna tillgängliga för alla element.

Du kan deklarera custom properties på vilket element som helst. Men om du vill att de ska gälla globalt, alltså överallt, är :root rätt ställe.

Pröva i DevTools: inspektera dina variabler

Custom properties syns tydligt i DevTools och är enkla att felsöka. Använd det här flödet när du bygger ditt designsystem i uppgiften nedan:

Öppna din sida och tryck F12.
Markera <html>-elementet i Element-trädet.
Under fliken Computed, scrolla ner till avsnittet som listar egenskaper som börjar med --. Där ser du alla custom properties som är aktiva på sidan.
Klicka sedan på ett element som använder var(--color-primary). Under Styles ser du värdet direkt: color: var(--color-primary) med hex-koden visad som en liten färgruta bredvid.
Testa: dubbelklicka på hex-koden i färgrutan och byt ut den mot något helt annat. Ser du att alla element som använder var(--color-primary) uppdateras på en gång?

Uppgift: Bygg ditt designsystem

Ta din varumärkesanalys från Designstilar & identitet och gör den till kod på din publicerade övningssida. Så här kan blocket se ut, allra överst i style.css:

/* ================================
   DESIGN SYSTEM
   Brand: Batman
   Stil: Techie / Scientific
   Adjektiv: Diskret · Mörk · Effektiv
   ================================ */

:root {
    /* Färger */
    --color-primary: #0d1b2a;
    --color-accent: #3a7bd5;
    --color-bg: #f0f4f8;
    --color-text: #1a1a2e;

    /* Spacing */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
}

Lägg ett eget DESIGN SYSTEM-block överst i din style.css: en kommentar med brand, stil och adjektiv, följt av :root.
Deklarera minst tre färger (--color-primary, --color-bg, --color-text) och tre spacing-värden (--space-sm, --space-md, --space-lg). Hämta färgerna från din analys.
Gå igenom din befintliga CSS och ersätt alla hårdkodade hex-koder med variabelreferenser.
Testa: ändra --color-primary till en helt annan färg och ladda om. Allt som använder var(--color-primary) ska följa med, utan att du rört något annat. Inspektera gärna i Computed enligt DevTools-flödet ovan.

Typsnitt lägger du till i :root i nästa del, när du valt dina Google Fonts. Kommentaren är inte dekor, den är ett löfte till ditt framtida jag: varje val nedanför ska kunna motiveras med ett av adjektiven.

Vad händer om…

Stava fel på variabelnamnet och skriv var(--colour-primary) i stället för var(--color-primary). CSS ger inget felmeddelande i konsolen. Elementet faller tyst tillbaka på ärvd färg eller webbläsarens standard, och ingenting markeras som fel. Öppna DevTools Computed-fliken och titta på vilket värde som faktiskt används på elementet. Det är så du hittar den typen av fel.

Motivera & reflektera

I ditt repos README, skriv två meningar: om varumärket byter profilfärg imorgon, vilken rad i din CSS ändrar du, och varför räcker det med den enda raden?