CSS conventies, properties en nesting

Code Conventies

1. Remove trailing white spaces

Geen onnodige spaties achterlaten!

✅

<p>Wel goed!</p>

❌

<p>Niet goed </p>

2. Class naming

Gebruik specifieke of generieke class names.

✅

.gallery {}
.login {}
.aux {}
.alt {}

❌

.hi {}
.hi2 {}
.random {}
.lol {}

3. Two space indents

gebruik 2 spaces. Geen tab!

✅

<header>
  <p>Goed zo!</p>
</header>

❌

<header>
      <p>Goed zo!</p>
</header>

CSS nesten

Bij css nesten kan je ervoor zorgen dat je in een keer een heel deel van je css kan 'collapsen' hier een voorbeeld:

.marketplace { 
  & {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & h3 {
    font-family: var(--main-font);
    font-weight: lighter;
  }
}

In dit stukje is te zien dat de h3 in de class 'marketplace' is genest. Dit maakt het overzichtelijker en je treedt minder in herhaling op. Anders zou je telkens weer '.marketplace' moeten opschrijven en nu hoeft dat niet. Ook zit de 'h3' in de '.marketplace' waardoor je met een klik op de knop de hele css van '.marketplace' dicht kan klappen.

Custom Properties

Ook maken we gebruik custom properties. Zo hebben we een :root waar allerlei kleuren in staan;

:root {
    --primaireKleur: #ffffff;
    --secundaireKleur: #0a3250;
    --tertiaireKleur: #46aa64;
    --mainFont: "AvantGardeGothicMedium";
  }

Dit is handig omdat we nu op een punt bovenin het css bestand alle kleuren en basis properties hebben staan, zodat het duidelijk en overzichtelijk is en daarbij is het heel makkelijk om aanpassingen te maken, aangezien je nu maar op 1 plek iets hoeft aan te passen wat verder effect op je hele site heeft. Wat werken een stuk efficienter maakt.

Ook in het 'css nesten' voorbeeld zijn het gebruik van custom properties te zien.

Om te zorgen dat we goed weten waar andere mee bezig zijn en waar je dus niet aan moet of hoeft te komen communiceren we dit via whatsapp maar zetten we dit ook als opmerkingen in het bestand waarin we werken;

/*
dit moet nog gebeuren voor footer:
- typgografie
- kleuren 
- eventueel aanpassingen gebasseerd op feedback/suggesties 
- streepje onder h4 nog aanpassen
*/

ook gebruiken we zulke opmerkingen om aan te geven waar een stuk css begint en eindigt