CSS-variabelen (officieel custom properties genoemd) zijn een browser-eigen functie waarmee je een waarde één keer definieert en overal in je stylesheet hergebruikt. Ze centraliseren waarden zoals kleuren, witruimte en lettertypes zonder dat je een preprocessor als Sass nodig hebt, en het mooiste is dat ze tijdens runtime met JavaScript gewijzigd kunnen worden. In dit artikel zetten we CSS-variabelen vanaf nul op, bouwen we een echt licht/donker-thema en behandelen we patronen die je dagelijks gebruikt.
Wat zijn CSS-variabelen precies?
Een custom property bestaat uit een naam die begint met -- en een waarde. Om hem uit te lezen gebruik je de functie var(). De meest gangbare aanpak is om je variabelen te declareren op de :root-selector, want :root richt zich op het wortelelement van het document (<html>) en variabelen die daar gedefinieerd zijn, zijn op de hele pagina beschikbaar.
:root {
--kleur-primair: #6c5ce7;
--kleur-tekst: #1a1a1a;
--ruimte: 16px;
}
.knop {
background: var(--kleur-primair);
color: white;
padding: var(--ruimte);
}Wil je nu de primaire kleur wijzigen, dan pas je één regel aan, en de tientallen regels die ervan afhangen worden automatisch bijgewerkt. In tegenstelling tot klassieke hard-coded waarden krijg je één enkele bron van waarheid.
var() en fallback-waarden
var() kan een tweede argument aannemen: een fallback-waarde. Is de variabele niet gedefinieerd of ongeldig, dan springt de fallback in. Dit is handig om veilig een variabele te benaderen die nog niet gedefinieerd is:
.kaart {
/* wit wordt gebruikt als --kaart-bg niet gedefinieerd is */
background: var(--kaart-bg, #ffffff);
border-radius: var(--kaart-radius, 8px);
}De fallback omvat alles na de komma, dus zelfs een andere var() kan als fallback dienen: var(--a, var(--b, red)).
Overerving en scope
De krachtigste eigenschap van CSS-variabelen is dat ze de normale CSS-overerving volgen. Definieer je een variabele op een specifiek element, dan zien alleen dat element en zijn nakomelingen de waarde. Dit maakt component-gebonden theming eenvoudig:
.melding {
--kleur-accent: #e17055;
}
.melding .titel {
color: var(--kleur-accent); /* oranje */
}Je kunt dezelfde variabele --kleur-accent met verschillende waarden definiëren in verschillende containers en het uiterlijk van de gedeelde componenten daarin met één regel veranderen. Dit kun je met Sass-variabelen niet, omdat die bij het compileren worden opgelost en geen begrip van scope of overerving kennen.
Praktijkvoorbeeld: licht/donker-thema
Het meest voorkomende gebruik van CSS-variabelen is het wisselen van thema. Je verplaatst je kleuren naar variabelen en overschrijft daarna de waarden op basis van een data-theme-attribuut op <html>:
:root {
--bg: #ffffff;
--tekst: #1a1a1a;
--kaart: #f5f5f7;
}
[data-theme="dark"] {
--bg: #0f0f12;
--tekst: #f2f2f5;
--kaart: #1c1c22;
}
body { background: var(--bg); color: var(--tekst); }
.kaart { background: var(--kaart); }De wissel met JavaScript activeren is een kwestie van een paar regels:
const btn = document.querySelector('#thema-wissel');
btn.addEventListener('click', () => {
const html = document.documentElement;
const volgende = html.dataset.theme === 'dark' ? 'light' : 'dark';
html.dataset.theme = volgende;
localStorage.setItem('thema', volgende);
});Eén kanttekening: wil je dat de hele pagina in één keer wisselt, dan is het verstandig je transitie-animaties tijdens de wissel tijdelijk uit te schakelen; anders probeert de browser honderden elementen tegelijk te laten overvloeien, wat traag kan aanvoelen.
Variabelen lezen en schrijven met JavaScript
Custom properties kunnen via de DOM gelezen en geschreven worden. Dat is krachtig om dynamische stijlen te genereren op basis van scrollpositie, muisbeweging of gebruikersinvoer:
const root = document.documentElement;
// Schrijven
root.style.setProperty('--kleur-primair', '#00b894');
// Lezen
const waarde = getComputedStyle(root)
.getPropertyValue('--kleur-primair')
.trim();Je kunt bijvoorbeeld de muispositie in een variabele schrijven en met alleen CSS een glow-effect bouwen. De logica blijft in JavaScript terwijl het visuele volledig in CSS leeft, wat de code schoon houdt.
Beste praktijken en valkuilen
- Gebruik betekenisvolle namen. Rolgebaseerde namen als
--kleur-primairzijn beter onderhoudbaar dan waardegebaseerde namen als--paars, omdat de naam zinvol blijft ook al verandert de waarde. - Groepeer je design-tokens. Bundel groepen als kleuren, witruimte, radii en schaduwen in logische blokken binnen
:root. - Ze zijn hoofdlettergevoelig.
--Kleuren--kleurzijn verschillende variabelen. - Ze bevatten waarden, geen selectors. Je kunt een variabele alleen een waarde toekennen (kleur, getal, lengte), geen volledige CSS-regel.
- Browserondersteuning is breed. Alle moderne browsers ondersteunen ze al jaren; alleen zeer oude Internet Explorer-versies niet.
Veelgestelde vragen
Wat is het verschil tussen CSS-variabelen en Sass-variabelen?
Sass-variabelen ($kleur) worden bij het compileren opgelost en verschijnen niet in de uiteindelijke CSS; ze zijn statisch. CSS-variabelen (--kleur) blijven live in de browser, respecteren overerving en kunnen tijdens runtime met JavaScript gewijzigd worden. Voor dynamische scenario's zoals theming zijn CSS-variabelen veel geschikter.
Kan ik media queries gebruiken met custom properties?
Ja. Door een variabele binnen een @media-blok opnieuw te definiëren, kun je responsieve waarden produceren; bijvoorbeeld --ruimte: 32px op een breed scherm en --ruimte: 16px op mobiel. Elk component dat die variabele gebruikt, past zich automatisch aan.
Wat gebeurt er als een variabele een ongeldige waarde krijgt?
De betreffende eigenschap wordt gemarkeerd als ongeldig op het moment van waardeberekening, en de overgeërfde of beginwaarde van de eigenschap wordt in plaats daarvan gebruikt. Daarom is het toevoegen van een var()-fallback op kritieke plekken een veilige keuze.
Wil je een schoon, schaalbaar design system in je project? Ik help je graag een onderhoudbare, thema-klare interface te bouwen met CSS-variabelen. Neem contact op en laten we het over je project hebben.