🧩 Variabelen & best practices

CSS Custom Properties (variabelen)

CSS-variabelen beginnen met -- en worden uitgelezen met var(). Je definieert ze in :root zodat ze overal beschikbaar zijn.

/* Definiëren in :root (globaal beschikbaar) */
:root {
  --kleur-primair:    #2dd4bf;
  --kleur-donker:     #0f172a;
  --kleur-tekst:      #e2e8f0;
  --kleur-muted:      #94a3b8;

  --afstand-sm:  8px;
  --afstand-md:  16px;
  --afstand-lg:  24px;
  --afstand-xl:  48px;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;

  --schaduw-sm:  0 1px 3px rgba(0,0,0,0.2);
  --schaduw-md:  0 4px 16px rgba(0,0,0,0.3);

  --duur-snel:   0.15s;
  --duur-normaal: 0.3s;
}

/* Gebruiken */
.knop {
  background: var(--kleur-primair);
  padding: var(--afstand-sm) var(--afstand-md);
  border-radius: var(--radius-md);
  transition: all var(--duur-normaal) ease;
}

/* Fallback-waarde */
color: var(--kleur-accent, #3b82f6); /* als --kleur-accent niet bestaat → blauw */

Donker thema met één CSS-variabele-wissel

Custom properties zijn de ideale basis voor een licht/donker-thema — overschrijf simpelweg de variabelen.

/* Standaard: licht thema */
:root {
  --bg:     #ffffff;
  --tekst:  #111827;
  --kaart:  #f9fafb;
  --rand:   #e5e7eb;
}

/* Donker thema via OS-voorkeur */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #0f172a;
    --tekst:  #e2e8f0;
    --kaart:  #1e293b;
    --rand:   #334155;
  }
}

/* Donker thema via class (handmatig toggle) */
.dark {
  --bg:     #0f172a;
  --tekst:  #e2e8f0;
  --kaart:  #1e293b;
  --rand:   #334155;
}

/* Gebruik de variabelen overal */
body       { background: var(--bg); color: var(--tekst); }
.kaart     { background: var(--kaart); border: 1px solid var(--rand); }

Naamgeving & CSS-organisatie

/* Aanbevolen volgorde in één CSS-bestand */

/* 1. Reset & base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: ...; }

/* 2. Custom properties */
:root { --kleur-primair: ...; }

/* 3. Typografie */
h1, h2, h3 { ... }

/* 4. Lay-out / containers */
.container { max-width: 1200px; margin: 0 auto; }

/* 5. Componenten */
.knop { ... }
.kaart { ... }

/* 6. Pagina-specifieke stijlen */
.homepage-hero { ... }

/* 7. Utilities (optioneel) */
.sr-only { position: absolute; clip: rect(0,0,0,0); }

/* 8. Media queries (of per component — beide werken) */
@media (min-width: 768px) { ... }

/* ❌ Te specifiek — moeilijk te overschrijven */
div#sidebar ul.menu li a.actief { color: teal; }

/* ✅ Laag en voorspelbaar */
.menu-link--actief { color: teal; }

CSS debuggen met DevTools

Browser DevTools zijn je belangrijkste CSS-gereedschap. Open ze met F12 of Ctrl+Shift+I.

De perfecte CSS-startkit

Zet dit bovenaan élk CSS-bestand — het lost de meeste verrassingen op vóór ze beginnen:

/* 1. Box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Verwijder standaard margins */
* {
  margin: 0;
  padding: 0;
}

/* 3. Basis body */
body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* betere tekst-rendering */
}

/* 4. Afbeeldingen nooit groter dan hun container */
img, video {
  max-width: 100%;
  display: block;
}

/* 5. Invoervelden erven het font */
input, button, textarea, select {
  font: inherit;
}

/* 6. Respecteer bewegingsgevoeligheid */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Oefening 1 – Design system met variabelen

Bouw een mini design system met custom properties:
• In :root: --kleur-primair #2dd4bf, --kleur-bg #0f172a, --kleur-surface #1e293b, --kleur-tekst #e2e8f0, --kleur-muted #94a3b8, --radius 12px, --schaduw 0 4px 20px rgba(0,0,0,0.3)
• body: background var(--kleur-bg), color var(--kleur-tekst), font-family sans-serif, margin 0, padding 24px, display flex, gap 16px, flex-wrap wrap
• .kaart: background var(--kleur-surface), border-radius var(--radius), padding 20px, box-shadow var(--schaduw), width 180px
• .kaart h3: color var(--kleur-primair), margin 0 0 8px
• .kaart p: color var(--kleur-muted), margin 0, font-size 13px
• .knop: background var(--kleur-primair), color var(--kleur-bg), border none, border-radius var(--radius), padding 10px 20px, font-weight 700, cursor pointer, margin-top 12px, display block, width 100%, transition all 0.2s ease

<div class="kaart">
  <h3>CSS-track</h3>
  <p>12 lessen CSS.</p>
  <button class="knop">Start</button>
</div>
<div class="kaart">
  <h3>JS-track</h3>
  <p>Interactiviteit.</p>
  <button class="knop">Start</button>
</div>

Oefening 2 – Licht/donker thema

Bouw een thema-systeem met custom properties:
• :root: --bg #f8fafc, --surface #ffffff, --tekst #0f172a, --accent #2dd4bf, --rand #e2e8f0
• .dark: dezelfde variabelen maar donker: --bg #0f172a, --surface #1e293b, --tekst #e2e8f0, --accent #2dd4bf, --rand #334155
• body: background var(--bg), color var(--tekst), font-family sans-serif, margin 0, padding 24px, transition background 0.3s, color 0.3s
• .kaart: background var(--surface), border 1px solid var(--rand), border-radius 16px, padding 24px, max-width 320px, margin-bottom 16px
• .kaart h2: color var(--accent), margin 0 0 8px
• .toggle: padding 8px 16px, background var(--accent), color #0f172a, border none, border-radius 8px, cursor pointer, font-weight 700

<button class="toggle"
  onclick="document.body.classList
  .toggle('dark')">
  🌙 Wissel thema
</button>
<div class="kaart">
  <h2>CSS Variabelen</h2>
  <p>Wissel hierboven van
  thema — de kaart past
  automatisch mee!</p>
</div>

Quiz