Wat is de BEM-methodologie?

BEM (Blok, Element, Modifier) — een methodologie voor het benoemen van klassen in CSS om schaalbare en onderhoudbare code te creëren. Het doel is om componenten onafhankelijk, herbruikbaar en gemakkelijk aan te passen te maken.

Basisprincipes:

Blok: Onafhankelijke component met een unieke naam. Kan elementen en andere blokken bevatten.
```
<div class="card">...</div>
```
Element: Deel van het blok dat geen zelfstandige betekenis heeft buiten de context van het blok. De naam van het element wordt gescheiden van de naam van het blok door twee onderstrepingen (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modificator: Voegt een toestand toe aan of verandert het uiterlijk/gedrag van het blok of element. De naam van de modificator wordt gescheiden van de naam van het blok of element door twee koppelteken (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Voordelen:

Leesbaarheid: Klassen zijn gemakkelijk te begrijpen, de structuur van het component is zichtbaar.
Herbruikbaarheid: Componenten zijn onafhankelijk en kunnen in verschillende delen van het project worden gebruikt.
Onderhoudbaarheid: Wijzigingen in één component beïnvloeden andere minimaal.
Schaalbaarheid: Geschikt voor grote teams en projecten.

Voorbeeldstructuur:

.card {
  /* Stijlen van het blok */
}

.card__title {
  /* Stijlen van het element */
}

.card__text {
  /* Stijlen van het element */
}

.card--featured {
  /* Stijlen van de modificator van het blok */
}

.button {
  /* Stijlen van het blok */
}

.button--primary {
  /* Stijlen van de modificator van het blok */
}

.button--disabled {
  /* Stijlen van de modificator van het blok */
}