Code Conventions - Liamvanbart1/Framez GitHub Wiki

Push and pull

feature-branch structuur(werken van een feature in een aparte branch)

controle door ander teamlid(2) voor push naar main

controle door ander teamlid voor push naar dev

zet erbij wat je heb gedaan in een pull request

wanneer iemand zich niet aan de code conventions houd comments plaatsen en pull request afwijzen

Classnames and ID

html, css -> kebab-case

js -> CamelCase

in het engels

https://css-tricks.com/bem-101/ ( Naming conventions CSS ) .block {} .block__element {} .block--modifier {}

.card { background-color: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.card--highlighted { border: 2px solid orange; }

.card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }

.card__description { font-size: 1rem; color: #666; }

.card__button { padding: 0.5rem 1rem; border: none; cursor: pointer; }

.card__button--primary { background-color: blue; color: white; }

<div class="card card--highlighted">
  <h2 class="card__title">Titel</h2>
  <p class="card__description">Beschrijving van de kaart.</p>
  <button class="card__button card__button--primary">Klik hier</button>
</div>

Liquid: alles in een aparte component

CSS: component nesting

Elk aangemaakt component heeft zijn eigen css bestand. Om te zorgen dat alleen het relevante component word aangesproken door de css, heeft de container van de component altijd een class. De CSS word in deze class genest. Screenshot 2025-05-22 at 11 07 41