Home / Blog

BEM als frontend methodiek: de basisprincipes

De afkorting BEM staat voor Block, Element en Modifier. Het is een frontend methodiek met een duidelijke architectuur en herkenbare termen. In dit artikel deel ik de basisprincipes van BEM.

Geschreven door Marley

Begrijpelijke code

Als developer werk je vaak aan verschillende projecten, opgezet door verschillende developers. Om op dezelfde lijn te zitten met elkaar moet je de code van een ander kunnen begrijpen. Wanneer de code voor iedereen goed te begrijpen is wordt het eenvoudiger om een project over te nemen of om elkaar te ondersteunen. Voor iedere methodiek zijn er andere naamgevingsconventies. Voor nu laat ik je zien hoe wij bij Linku te werk gaan als het neerkomt op CSS en HTML met behulp van BEM als frontend methodiek.

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in frontend development.

Getbem.com

Wat is BEM?

BEM is een hulpmiddel om structuur aan te brengen in de CSS van een website. Duidelijke afspraken en richtlijnen die ervoor zorgen dat een andere developer eenvoudiger en sneller kan aansluiten bij een nieuw project.

BEM staat voor Block Element Modifier en is in andere woorden een naamgevingsconventie voor CSS Classes. Deze classes worden gebruikt op een website om de vormgeving op te zetten. Denk hierbij aan kleuren, typografie en de positie van alle elementen die je ziet op een website.

Block

.block {}

Een block is een onafhankelijke bouwsteen van een applicatie. Een voorbeeld hiervan is bijvoorbeeld een zoekbalk of button.

Element

.block__element {}

Een element is een onderdeel van een specifiek block. Een voorbeeld is het invoerveld of de knop van de zoekbalk. Dit element zie je alleen in een specifiek block en wordt niet op zichzelf gebruikt.

Modifier

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

Nu hebben we het nog niet over de modifiers gehad, dit is meteen een onderdeel waar veel mensen kritiek op hebben omdat je op deze manier in HTML lange en meerdere class names hebt. Dit kan in eerste instantie onoverzichtelijk overkomen. Maar zodra je BEM begrijpt, zul je snel merken dat het juist helpt om te begrijpen wat er gebeurt.

Een modifier is een variatie op een bestaand block of element. Met een modifier kun je de uitstraling aanpassen. Een voorbeeld hiervan kan een andere opmaak zijn voor een knop. De modifier wordt toegevoegd naast een bestaand block of element.

BEM frontend methodiek blog — Buttons voor myparcel.nl

De voordelen van BEM

Deze frontend methodiek heeft veel voordelen. Het maakt je code leesbaar, begrijpelijk, herbruikbaar en modulair.

Modulair.
Bouwstenen ontwikkelen die je kunt hergebruiken door de onafhankelijkheid van andere elementen.
Structuur.
Het geeft je CSS-code een grondige structuur die eenvoudig te begrijpen blijft.
Minder nesting.
Elk element of groep elementen van hetzelfde type kan worden geselecteerd door zijn unieke class name.
Onafhankelijk van HTML-elementen.
Elk block is een losstaand component en is overal los te gebruiken, zonder zijn style te verliezen.
Betere samenwerking met anderen.
De CSS is beter in te delen, stukken code kun je eenvoudiger terugvinden en verder ontwikkelen door de overdraagbaarheid van de code.

Mijn eerste kennismaking met BEM

Voordat ik in april 2019 bij Linku aan de slag ging, werkte ik onder andere bij Sanoma. Het bedrijf waar ik kennismaakte met de frontend methodiek BEM. Bij dit bedrijf werkte ik in een groot team van developers. Het team bestond grotendeels uit freelancers, waarvan sommigen er al langer werkten, maar een ander deel ook voor een kortere duur. In zo’n samenstelling is het erg belangrijk dat de methodiek van de code van alle projecten gestructureerd is. Mijn collega Danny destijds introduceerde BEM aan mij. In eerste instantie had ik mijn twijfels, omdat ik meer werk zag. Maar ik gaf het een kans. Nu kan ik niet meer zonder, mede omdat iedereen dezelfde methodiek gebruikt en daardoor begrijpen developers elkaars code beter. Inmiddels heb ik een eigen variant ontwikkeld die binnen Linku ook wel bekend staat als MarleyBEM.

BEM bij Linku

De corporate website van F&L Media was mijn eerste project in dienst van Linku. Tijdens de ontwikkeling van de website heb ik ook gekeken naar de code van andere projecten. Hierbij viel me op dat niet iedereen dezelfde structuur gebruikte. Wat tot gevolg had dat de code niet altijd even leesbaar is voor iemand die niet betrokken is bij de ontwikkeling. Het werkt overigens prima, maar als nieuwe developer kost het je onnodig meer tijd.

Flexibele contentblokken

In het project Fairtrade Nederland/Max Havelaar heb ik MarleyBEM toegepast. Fairtradenederland.nl is ontwikkeld op basis van maatwerk WordPress.

Bekijk de case

Voor F&L Media maakte ik ook gebruik van de CSS-ervaring die ik al had en BEM. Na de code-review met mijn team lead heb ik een presentatie gegeven aan de rest van het development-team. Wat denk je? Zelfde eerste indruk als die ik had, niet iedereen was enthousiast. Maar ook hier werd BEM een kans gegeven. Linku staat altijd open voor het proberen van nieuwe technieken of werkwijzen, mits het een toegevoegde waarde is op lange termijn voor het bedrijf, de klanten en de ontwikkeling van de developers.

Voorbeelden

Met de opzet die voorheen veel gebruikt werd is het niet direct logisch wat er gebeurt. Je wist dus niet zeker of je een class gewoon kunt stijlen zonder dat er ergens anders ook iets verandert.

.card {
  .title {}
  .link {}
  .image {}
}   
 
.panel {
  .title {}
  .link {}
  .image {}
}

<div class="panel">
  <img src="#" alt="" class="image">  
  <h2 class="title">Titel</h2>
  <a href="#" class="link">link</a>
</div>
<div class="card">
  <img src="#" alt="" class="image">
  <h2 class="title">Titel</h2>
  <a href="#" class="link">link</a>
</div>

Stel ik wil in dit voorbeeld de titel in de card voorzien van styling. Dan zou ik dat doen door opmaak toe te voegen aan de class .title, bijvoorbeeld zoals hieronder:

.title {
  font-size: 1rem;
}

Het probleem hierbij is echter dat je ook de styling van de titels binnen het panel zo kan aanpassen. Om dat te verhelpen gebruik je nesting in CSS, dus zou je het volgende krijgen:

.title {
  font-size: 1rem; // Voor alles
}
 
.card .title { 
  font-size: 2rem; // Voor alleen de CSS binnen de card class
}

Dit is niet altijd een fijne werkwijze, je moet dan per class goed nadenken of het niet al ergens anders gebruikt is. Alle classes moet je dan uit voorzorg al gaan nesten zodat de kans kleiner is dat je bestaande elementen zult aanpassen. Oftewel nesten, nesten en nog eens nesten om altijd een unieke CSS-selector op te bouwen. Niet handig en lastig over te dragen. Met BEM kun je dit probleem als volgt oplossen:

.card {}
.card__title {}
.card__link {}
.card__image {}
 
.panel {}
.panel__title {}
.panel__link {}
.panel__image {}

Je maakt een class voor het block element, bijvoorbeeld .card of .panel. Vervolgens maak je voor ieder onderdeel een los HTML-element aan met een unieke class. De class bestaat dan uit de naam van het block plus een naam voor het element, bijvoorbeeld: .card__title

Dan kun je .card__title stijlen zonder andere classes in de weg te zitten en zonder dat je moet nesten. Zo blijft in de toekomst alles nog steeds overzichtelijk en makkelijk om aan te passen, zonder dat het andere elementen op de website onnodig verandert. En dit gaat verder dan alleen de CSS files, de HTML files worden hierdoor ook duidelijker, ondanks de lange classes. In het voorbeeld zie je direct dat de .panel__title onderdeel is van panel:

<div class="card">
  <img src="" alt="" class="card__image">
  <h2 class="card__title"></h2>
  <a href="" class="card__link"></a>
</div>
 
<div class="panel">
  <img src="" alt="" class="panel__image">
  <h2 class="panel__title"></h2>
  <a href="" class="panel__link"></a>
</div>

Waarom is dit handig?

Je ziet in een oogopslag waar het in de code over gaat. Door duidelijk namen te gebruiken, weet je over welk onderdeel het gaat en door de classes van BEM weet je direct welke elementen bij elkaar horen en invloed op elkaar kunnen hebben.

BEM is a way to modularize development of web pages. By breaking you web interface into components. You can have your interface divided into independent parts, each one with its own development cycle.

Varya Stepanova

Yandex, 2009

MarleyBEM

De huidige BEM heeft een eigen bijnaam gekregen binnen Linku, aangezien het BEM is plus mijn eigen toevoegingen. De frontend methodiek was echter al bekend binnen Linku, het was namelijk niet de eerste keer dan BEM werd gebruikt. Dat het nu wel door iedereen wordt gebruikt, komt mede door de toevoegingen die ik heb gedaan. Eén van de toevoegingen die ik heb toegepast:

Prefix: `.c-` – Component

Een los element binnen je website kun je een component noemen. Denk hierbij aan een knop, zoekbalk of een hoofdmenu.

Prefix: `.s-` – Structuur

Vaak een groter layout-element. Bijvoorbeeld de main wrapper van een website, waar vrijwel alles in zit. Dit zijn elementen die je eigenlijk nooit zult hergebruiken. In de meeste WordPress-websites gebruiken we dit nauwelijks omdat we ook gebruik maken van Bootstrap.

Prefix: `.b-` – (Gutenberg) -Blokken

In de nieuwe WordPress-websites maken we gebruik van Gutenberg. Hiermee maken we elementen aan waar de pagina mee opgebouwd kan worden.

Prefix: `.js-` – JavaScript

De JavaScript-prefix wordt gebruik naast andere classes om de JavaScript-functionaliteit te koppelen aan een element. Deze classes bevatten zelf geen styling. Een developer kan hiermee direct zien dat een class bedoeld is voor JavaScript en niet voor de opmaak van de website.

Prefix: `.is-/.has-` – States

De classes worden vaak toegevoegd via JavaScript, bijvoorbeeld wanneer er een menu wordt opengeklikt op mobiel. Dan geef je het menu de class .is-open mee.

Deze prefixes zijn toegevoegd om duidelijk aan te tonen welke classes wij hebben geschreven en welke functie de class heeft. Zo kun je bijvoorbeeld nooit zomaar een js- class veranderen of verwijderen. Omdat je dan ook de JavaScript-functionaliteit verliest.

Met deze uitleg hoop ik je meer inzicht te hebben gegeven in de mogelijkheden van BEM als frontend methodiek. Er zijn talloze mogelijkheden en methodieken die je als organisatie kunt gebruiken. Het belangrijkste is dat je een methodiek kiest die je duidelijkheid en structuur biedt. Zo verbeter je de samenwerking tussen developers met ijzersterke code die iedereen toepast en begrijpt. Dit resulteert uiteindelijk in de ontwikkeling van krachtige en consistente websites.

Sparren?