Meesterproef | WOGO Code conventies

1. Project Structuur

1.1. Bestandsindeling Volg de principes van atomic design om componenten te structureren:

Atoms: Kleinste herbruikbare componenten (bijv. Button, Icon).
Molecules: Combinaties van atoms die samen een functie vervullen (bijv. SearchBar).
Organisms: Combinaties van molecules die samen een sectie van een interface vormen (bijv. Header).
Templates: Herbruikbare pagina layouts (bijv. MainLayout).
Pages: Unieke pagina's die templates en organisms samenbrengen (bijv. Home).

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   ├── templates/
│   ├── pages/
├── graphql/
│   ├── queries/
│   ├── mutations/
├── lib/
├── routes/
├── styles/

2. Naamgevingsconventies

2.1. Algemeen

Gebruik Engelse benamingen voor alle code elementen.
Bestandsnamen voor CSS: Kebab-case (bijv. navigation-list).
Bestandsnamen voor Svelte componenten: PascalCase (bijv. UserProfile.svelte).
JavaScript/TypeScript variabelen en functies: camelCase (bijv. getUserData).

3. TypeScript Conventies

3.1. Typing Gebruik altijd expliciete types voor variabelen, parameters en return types. Definieer interfaces voor objecten en complexe datastructuren.

interface User {
  id: string;
  name: string;
  age: number;
}

3.2. Gebruik van any Vermijd het gebruik van het any type. Gebruik unknown als het type niet van tevoren bekend is en voer type checks uit.

4. CSS Conventies:

Gebruik voor CSS-code altijd een apart bestand en zet dus geen CSS in je HTML-code.
Gebruik in je CSS-code geen !important.
CSS-code wordt in lower case geschreven.
Maak in je CSS-code zo weinig mogelijk gebruik van id selectors (#).
Voorzie je CSS-code zoveel mogelijk van zinvol commentaar.
Gebruik zinvolle naamgeving waaruit blijkt wat de CSS-code doet of waar het voor gebruikt wordt.
Webpagina’s zijn responsive voor telefoon, tablet en desktop

4.1. CSS Order: