De BEM-methodologie

Of hoe je CSS correct organiseert wanneer je in een team werkt? Een cruciaal punt, dat we hieronder voor je uitleggen.

Hoewel CSS geen moeilijk taal is om onder de knie te krijgen, is het soms ingewikkeld om op de lange termijn of in grote projecten samen met één of meerdere ontwikkelaars een begrijpelijke en efficiënte code te behouden.

Op dat moment wordt de BEM-methodologie interessant.

Wat is BEM?

BEM staat voor Block Element Modifier. Het is een modulaire benadering van webontwikkeling waarbij een interface wordt opgedeeld in verschillende onafhankelijke blokken. Deze naamgevingsconventie kan worden toegepast op CSS-klassen, wat zorgt voor een beter leesbare en georganiseerde code door enkele eenvoudige regels te volgen.

Het doel is dat andere ontwikkelaars de structuur van een component gemakkelijk kunnen begrijpen door alleen naar de naam van de klassen te kijken. Het was nooit eenvoudig om je klassen in CSS te benoemen en het is nog ingewikkelder voor een andere ontwikkelaar om te begrijpen wat ze doen.

Block

Block vertegenwoordigt het hoofdelement. Het is de bovenliggende component van één of meerdere elementen. (Voorbeeld: header, nav, footer, enz.)

.block {}

Element

Element is een kind van block. (Voorbeeld: een navigatie-item, een titel, een paragraaf, enz.) Alle klassen beginnen met de naam van de hoofdcomponent block gevolgd door twee underscores en de naam van het element.

.block__element {}

Modifier

Modifier vertegenwoordigt een andere staat of versie van block of element. (Voorbeeld: de actieve staat van een element of een kleurwijziging van een element op een specifieke pagina). Het wordt afgebakend door twee streepjes.

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

In de praktijk

De BEM-methodologie is interessant om je CSS-bestanden te structureren, maar dat is niet alles. Het echte voordeel ervan vinden we terug in de HTML. Alleen al door de verschillende klassen te lezen, begrijp je direct de structuur van een component en de relatie tussen de klassen.

Laten we het voorbeeld nemen van een navigatiecomponent met meerdere items, waarvan er één anders gestileerd wordt met een active klasse.

HTML

We kunnen duidelijk de klassen zien die gerelateerd zijn aan het bovenliggende block .nav en degenen die dat niet zijn.

Door de elementen te prefixen met de naam van het bovenliggende block, weet ik dat .nav__item deel uitmaakt van de .nav component en niet buiten dit block kan worden gebruikt. Ik kan dus de stijl ervan aanpassen met de zekerheid dat ik geen andere elementen wijzig die elders in de code staan. Dit zou niet het geval zijn als ik zou besluiten de .link klasse te wijzigen, wat een meer algemene klasse is en die zich ook in een ander component kan bevinden.

Performance

De BEM-methodologie heeft niet alleen een impact op de organisatie en leesbaarheid van de code, maar ook op de prestaties van de site en de laadtijd van een pagina. Met de kracht van de huidige browsers is het slechts een klein detail geworden, maar het is belangrijk om het mechanisme te begrijpen.

Voor het voorbeeld laten we onze navigatie nogmaals bekijken. Als ik de navigatie-items wil stijlen, had ik het zo kunnen schrijven:

nav ul li {}

Wat om prestatie- en flexibiliteitsredenen zoveel mogelijk vermeden moet worden. Hoe langer een selector is (niveau van targeting), hoe langer de browser erover doet om de elementen in de DOM te vinden. Een browser leest de CSS-klassen van rechts (kind) naar links (ouder).

In dit geval zal het:

• Alle li in de DOM zoeken
• Dan controleren of deze li in een ul staat
• En uiteindelijk controleren of deze ul zich in een nav element bevindt

Dit is dus geen goede manier van werken. In grotere projecten zal dit een impact hebben op de laadtijd.

De beste benadering is om een methodologie zoals BEM te gebruiken, die je in staat stelt om het element direct te targeten, terwijl je visueel weet dat dit element zich in de .nav component bevindt.

.nav__item {}

Conclusie

De BEM-methodologie geeft CSS-code een solide structuur die eenvoudig en begrijpelijk blijft.

De CSS-stijl van een element blijft altijd binnen een component en is nooit afhankelijk van een ander element op de site. Je zult dus nooit problemen hebben met CSS-cascades.

Het creëren van onafhankelijke componenten en het intelligent hergebruiken ervan vermindert de hoeveelheid CSS-code. Dit resulteert in een code die op de lange termijn of in grote projecten eenvoudiger te onderhouden is. Door je bestanden correct te structureren, kun je componentbibliotheken maken om ze opnieuw te gebruiken en zelfs te importeren in andere projecten.

Bronnen

CSS Guidelines