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

geef je hele component een classname, nest al de css voor deze component in deze class