Wat zijn de voordelen van de BEM-methodologie?

BEM (Block, Element, Modifier) – methodologie voor het benoemen van CSS-klassen gebaseerd op het opdelen van de interface in onafhankelijke blokken.

Voordelen:

• Modulariteit: Maakt het mogelijk om interfacecomponenten te maken die onafhankelijk van elkaar kunnen worden hergebruikt.
• Onderhoudbaarheid: Dankzij een duidelijke naamgevingsstructuur is het gemakkelijker om stijlen te vinden en te wijzigen zonder andere delen van het project te beïnvloeden.
• Schaalbaarheid: Geschikt voor grote projecten met veel ontwikkelaars, omdat het het risico op conflicten in klassennamen vermindert.
• Duidelijkheid: Klassennamen weerspiegelen de structuur en functie van de elementen, wat de leesbaarheid van de code verbetert.
• Voorspelbaarheid: De stijlen van een blok zijn niet afhankelijk van de context, wat onverwacht gedrag uitsluit.
• Isolatie: De stijlen van één blok beïnvloeden de stijlen van een ander niet.

Voorbeeld:

/* Blok button */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Element icon binnen het blok button */
.button__icon {
  margin-right: 5px;
}

/* Modificator primary voor het blok button */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modificator disabled voor het blok button */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}