Declarative Design

Jeremy Keith – 12 maart 2025

Muzikale compositie als metafoor

Jeremy Keith vergelijkt twee stijlen van muziek maken:

  • Mozart (klassiek): alles is genoteerd, met strikte instructies voor de uitvoering.
  • Miles Davis (jazz): weinig tot geen instructies, veel improvisatie en vertrouwen in de muzikanten.

Deze benaderingen weerspiegelen hoe we ook naar programmeren kunnen kijken.

Imperatief vs. declaratief programmeren

  • Imperatief programmeren: je beschrijft stap voor stap hoe een programma werkt.
  • Declaratief programmeren: je beschrijft alleen het gewenste resultaat, zonder de tussenstappen te benoemen. Voorbeeld: SQL.

Declaratieve talen zijn eenvoudiger te leren, maar bieden minder directe controle.

Het web als gelaagd systeem

  • HTML: declaratief, negeert onbekende elementen zonder te breken.
  • CSS: ook declaratief, onbekende eigenschappen worden genegeerd.
  • JavaScript: imperatief; fouten stoppen de uitvoering van het script.

Het web is gebouwd op een declaratieve fundering, met een imperatieve laag daarbovenop.

Voorbeeld: een knop maken

  • Imperatief: een div wordt met JavaScript omgevormd tot knop.
  • Declaratief: gebruik simpelweg <button>.
"JavaScript should only do what only JavaScript can do."

De controle loslaten

Imperatief denken draait om controle. Declaratief denken draait om vertrouwen op het systeem. Denk aan het volgende voorbeeld:

font-size: calc(0.5rem + 0.666vw);
font-size: clamp(1rem, 0.5rem + 0.666vw, 1.5rem);

Deze aanpak past bij het idee van schaalbare en responsieve typografie zonder media queries. Zie ook: utopia.fyi

"CSS is a bicycle for design."

Handige CSS technieken en functies

  • calc(), clamp(), min(), max()
  • fit-content, min-content, max-content
  • repeat()
  • padding-inline-start (beter dan padding-left voor inclusiviteit)

Inspiratiebronnen: Layout Land, Every Layout, Build Excellent Website

Wanneer kies je voor declaratief of imperatief?

Dat hangt af van verschillende factoren:

  • Cultuur: Is er een managementstijl gebaseerd op controle of op vertrouwen?
  • Designsysteem: Is er een systematische aanpak die declaratief werken ondersteunt?
  • Het team: Hoe werkt het team het prettigst?
  • Het medium: Wat voor platform of technologie gebruik je?

Denken over denken

  • Analytisch denken: inzoomen, iets begrijpen door het op te splitsen.
  • Systeemdenken: uitzoomen, begrijpen hoe onderdelen met elkaar samenhangen.

Design systems vragen vooral om analytisch denken: het draait om structuur, componenten en consistentie.