9. Componenten

Componenten & BEM

Components

Wat is een component?

Een component is een herbruikbaar blokje dat verschillende keren terugkomt in je website

Het is een bouwblok die op zich kan staan
Het is herbruikbaar
De styling is hetzelfde, maar de content (zoals tekst en afbeeldingen) kan variëren
Er zijn variaties mogelijk op hetzelfde component

Componenten herkennen

Componenten in code

Ook in html komt bepaalde code meerdere keren terug

bijv: "The Arcade"-oefening met het game-kaartje = component
Door elk game-kaartje dezelfde classes te geven konden we alle kaartjes tegelijkertijd stylen

BEM-notatie

Componenten & classes

Het is handig om je componenten/block een duidelijke, algemene classname te geven, bijv: card, hero, nav...

<article class="card">
  <img
    src="images/uncharted.jpeg"
	alt="Uncharted"
  />
  <h2>Uncharted</h2>
  <p>
  Peerless visuals, slick gameplay and a confident story define Nathan
  Drake's adventure.
  </p>
</article>

.card {
  backgroundcolor: lightgray;
  padding: 2rem;
  border-radius: 1rem;
}

Componenten & classes

De elementen binnen het card-component zou je nu zo kunnen aanpsreken:

<article class="card">
  <img
    src="images/uncharted.jpeg"
	alt="Uncharted"
  />
  <h2>Uncharted</h2>
  <p>
  Peerless visuals, slick gameplay and a confident story define Nathan
  Drake's adventure.
  </p>
</article>

.card {
  background-color: lightgray;
  padding: 2rem;
  border-radius: 1rem;
}

.card h2 {
  font-size: 2.2rem
  color: black
}

.card p {
  color: gray;
}

...maar hoe complexer je component, hoe moeilijker om deze manier vol te houden

Componenten & classes

Meestal is het handiger om de elementen binnen je component/block dus ook een classsname te geven, dat doen we op de volgende manier: block_ _element

<article class="card">
  <img
    src="images/uncharted.jpeg"
	alt="Uncharted"
    class="card__image"
  />
  <h2 class="card__title">Uncharted</h2>
  <p class="card__text">
  Peerless visuals, slick gameplay and a confident story define Nathan
  Drake's adventure.
  </p>
</article>

.card {
  background-color: lightgray;
  padding: 2rem;
  border-radius: 1rem;
}

.card__title {
  font-size: 2.2rem
  color: black
}

.card__text {
  color: gray;
}

Componenten & classes

Een voorbeeld van classnames in een navigatiebalk:

<nav class="nav">
    <img src="logo.png" alt="Logo" class="nav__logo">
    
    <ul class="nav__menu">
        <li class="nav__item">
            <a href="#" class="nav__link">Home</a>
        </li>
        <li class="nav__item">
            <a href="#" class="nav__link">Over ons</a>
        </li>
        <li class="nav__item">
            <a href="#" class="nav__link">Diensten</a>
        </li>
        <li class="nav__item">
            <a href="#" class="nav__link">Contact</a>
        </li>
    </ul>
</nav>

Varianten

In de realiteit zal je soms een variant van een component moeten maken, waarbij de styling lichtjes verschilt, bijv:

Een nav-item in de default state en active state
Een card met een andere kleur om eruit te springen
Een primary button & een secondary button

Varianten

Het handigst is om een nieuwe class aan te maken om de extra styling toe te voegen. Die geven we een naam op de volgende manier: block--variant, die combineren we met de block class

.card {
  background-color: lightgray;
  padding: 2rem;
  border-radius: 1rem;
}

.card--black {
  background-color: black;
}

<article class="card">
  <img
    src="images/uncharted.jpeg"
    class="card__image"
  />
  <h2 class="card__title">Uncharted</h2>
  <p class="card__text"> Peerless visuals, slick gameplay </p>
</article>

<article class="card card--black">
  <img
    src="images/uncharted.jpeg"
    class="card__image"
  />
  <h2 class="card__title">Uncharted</h2>
  <p class="card__text"> Peerless visuals, slick gameplay </p>
</article>

Varianten

Voorbeeld waarbij één nav-item nu een aparte styling krijgt om een verschil te maken tussen een default item een een active item

<nav class="nav">
    <img src="logo.png" alt="Logo" class="nav__logo">
    
    <ul class="nav__menu">
        <li class="nav__item nav__item--active">
            <a href="#" class="nav__link">Home</a>
        </li>
        <li class="nav__item">
            <a href="#" class="nav__link">Over ons</a>
        </li>
        <li class="nav__item">
            <a href="#" class="nav__link">Diensten</a>
        </li>
        <li class="nav__item">
            <a href="#" class="nav__link">Contact</a>
        </li>
    </ul>
</nav>

BEM-notatie

De manier die we hierboven zagen om classnames te geven heet de BEM-notatie (Block-Element-Modifier)

Block: algemene naam van component, bijv: card
Element: element binnen component, bijv: card__title
Modifier: variant van een component, bijv: card--black

.block {...}
.block__element {...}
.block--modifier {...}