Component as a building block

Don't Repeat Yourself

Component as a building block

Over het structureren van componenten met een design system en een standaard in naamgeving.

Aanpak

Je hebt inmiddels een aantal componenten gebouwd (of aangepast) in je project. Maar hoe zorg je ervoor dat je codebase overzichtelijk blijft als het project groeit? Vandaag leer je twee dingen:

1. Hoe je componenten structureert met een design system
2. Hoe je naamgeving consistent gebruikt in verschillende talen

---

1. Design systems

Er zijn verschillende manieren om componenten in te delen. Elk systeem heeft zijn eigen logica en past beter bij bepaalde projecten.

🛠️ Opdracht 1 (30 min)

Doe deze oefening met je tafel.

1. Zoek online naar manieren om componenten te structureren.

2. Schrijf per methode op het whiteboard:
   • Wat is het idee achter de methode?
   • Hoe ziet de mappenstructuur eruit?
   • Voor welk type project is het geschikt?
3. Presenteer kort aan twee andere tafels wat je hebt gevonden.

2. Atomic design

Bij FDND hebben we gekozen om het design system van Atomic design in te zetten.

Atomic Design deelt componenten in op abstractieniveau, van klein naar groot:

Niveau	Wat is het	Voorbeelden
Atoms	Kleinste bouwstenen, volledig generiek	Button, Input, Badge, Icon
Molecules	Combinaties van atoms	SearchBar, FormField, NavItem
Organisms	Complexe blokken met context	Navbar, LoginForm, ProductCard
Templates	Pagina-layouts met slots, geen echte data	DashboardLayout, AuthLayout
Pages	In SvelteKit: je +page.svelte bestanden	—

De mappenstructuur in SvelteKit ziet er bijv. zo uit:

src/lib/components/
  atoms/
    Button.svelte
    Input.svelte
    Badge.svelte
  molecules/
    FormField.svelte
    SearchBar.svelte
  organisms/
    Navbar.svelte
    LoginForm.svelte
  templates/
    DefaultLayout.svelte

🛠️ Opdracht 2 (20 min)

Doe deze oefening met je team.

1. Bekijk de componenten die er al zijn in het project, ook bestaande projecten kun je valideren.
2. Maak een lijst: welk component is een atom, molecule of organism?
3. Herstructureer je components/ map naar de Atomic Design indeling. Schrijf deze op het whiteboard
4. Schrijf bij componenten waar je over twijfelt een ?, bespreek met een ander team wat zij denken van jouw ?'s
5. Update je CONTRIBUTING.md met de conventie van atomic design

3. Naamgeving

Naast structuur is ook de naamgeving van je CSS-klassen belangrijk. Zonder afspraken krijg je al snel namen als .red-button, .button2 of .nav-iets. Er zijn verschillende methodes om dit te voorkomen.

🛠️ Opdracht 3 (20 min)

Doe deze oefening in je team.

1. Zoek online naar CSS-naamgevingsconventies.

2. Schrijf per methode op het whiteboard:
   • Wat is het basisprincipe?
   • Hoe zien klassenamen eruit?
   • Wat is een voor- en nadeel?
3. Presenteer kort aan een ander team wat je hebt gevonden.

4. BEM

Bij FDND gebruiken we de BEM (Block Element Modifier) methode.

BEM beschrijft de relatie tussen een component en hun onderdelen:

/* Block */
.card { }

/* Element (onderdeel van het block) */
.card__title { }
.card__image { }

/* Modifier (variant van het block of element) */
.card--featured { }
.card__title--large { }

Vuistregels:

• Gebruik __ voor elementen binnen een block
• Gebruik -- voor varianten (modifiers)
• Nest geen BEM-klassen in elkaar in je CSS (je wilt namelijk een zo laag mogelijke specificty behouden)

🛠️ Opdracht 4 (30 min)

Doe dit met je team.

1. Kies alle drie één bestaand component en hernoem de CSS-klassen naar BEM-syntax.
2. Bespreek met een docent: klopt de naamgeving?
3. Update je CONTRIBUTING.md met de conventie over naamgeving

Extra bronnen

• Atomic Design — Brad Frost
• BEM — officiële documentatie
• CSS architectuur vergelijking
• Modern CSS architecture guide

💪 Extra uitdagingen

• Zet je atoms en molecules op in Storybook zodat je een eigen component library krijgt
• Schrijf een barrel file (index.js) per Atomic Design-laag zodat imports overzichtelijk blijven

✒️ Leervragen

Zet de antwoorden in je learning journal:

1. Wat is het verschil tussen een atom, molecule en organism? Geef een voorbeeld uit je eigen project.
2. Waarom is consistente naamgeving belangrijk in een team?
3. Hoe helpt BEM om CSS overzichtelijk te houden naarmate een project groeit?
4. Waar liep je tegenaan bij het herstructureren van je componenten, en hoe heb je dat opgelost?