CSS BEM methode

1.1 Wat is BEM?

BEM staat voor Block, Element, Modifier. Het is een gestructureerde aanpak om namen te geven aan CSS-klassen in webontwikkeling. Met BEM probeer je op een duidelijke en consequente manier stijlen toe te passen op de verschillende onderdelen van een website, waardoor je code gemakkelijker te begrijpen en te onderhouden is.

Laten we de betekenis van elk onderdeel van de afkorting eens nader bekijken.

  • Block: Een blok is een onafhankelijk, herbruikbaar component op je website. Het kan bijvoorbeeld een navigatiebalk, een knop of een zijbalk zijn. Een blok wordt meestal gedefinieerd door een enkele klasse die de naam van het blok weerspiegelt, bijvoorbeeld: .navbar of .button.
  • Element: Een element is een onderdeel van een blok dat semantisch en visueel bij dat blok hoort. Denk aan een knop binnen een navigatiebalk of een item in een lijst. Elementen worden genest binnen hun blok en krijgen klassenamen met dubbele underscores, zoals .navbar__button of .list__item.
  • Modifier: Een modifier ("aanpasser" of "wijzigingselement") is een variatie van een blok of element die een andere stijl of staat vertegenwoordigt. Modifiers worden gebruikt om verschillende weergaven van een blok of element aan te geven, zoals een gekleurde knop of een geselecteerd item. Modifiers krijgen klassenamen met dubbele streepjes, zoals .button--blue of .item--selected.

Het gebruik van BEM biedt een aantal belangrijke voordelen

  • Duidelijkheid en voorspelbaarheid: Door een gestandaardiseerde manier van klassenamen te hanteren, wordt het voor zowel ontwikkelaars als ontwerpers gemakkelijker om de betekenis en het doel van elke klasse te begrijpen.
  • Onderhoudsgemak: Door de modulaire structuur van BEM blijft je codebase overzichtelijk, wat het aanbrengen van wijzigingen en het oplossen van problemen vergemakkelijkt.
  • Herbruikbaarheid: Doordat elk blok en element zelfstandig en goed gedefinieerd is, kun je ze gemakkelijker hergebruiken in verschillende delen van je project.
  • Teamwerk: BEM vergemakkelijkt samenwerking tussen ontwikkelaars en ontwerpers, omdat iedereen dezelfde taal spreekt als het gaat om het benoemen van klassen.

Samengevat, BEM is een krachtige benadering die je helpt om schone, begrijpelijke en consistente CSS-code te schrijven. In de volgende hoofdstukken gaan we dieper in op hoe je BEM in de praktijk kunt toepassen.

1.2 BEM-nomenclatuur

In dit hoofdstuk gaan we dieper in op de specifieke nomenclatuur die wordt gebruikt bij het implementeren van BEM in je CSS-code. Het correct benoemen van blokken, elementen en modifiers is van cruciaal belang om de BEM-methodologie effectief toe te passen.

Block-naam

Elke klasse voor een blok begint met een beschrijvende naam die het doel en de functie van het blok duidelijk aangeeft. Het is belangrijk om deze naam in kleine letters te schrijven en woorden te scheiden door middel van koppeltekens. Dit benadrukt niet alleen de leesbaarheid van je code, maar helpt ook bij het direct begrijpen van de rol van het blok binnen je interface.

Een goede naam voor een blok weerspiegelt wat het doet zonder dat je de code zelf hoeft te bestuderen. Het maakt het mogelijk voor zowel jij als andere ontwikkelaars om snel te begrijpen welke functionaliteit het blok biedt.

Stel dat je werkt aan een blok dat een lijst met artikelen op een nieuwssite weergeeft. Een geschikte bloknaam voor dit element zou kunnen zijn:


<div class="article-list"> </div>
    

In dit voorbeeld wordt de bloknaam "article-list" gebruikt. Hier zijn enkele redenen waarom deze naam geschikt is:

  1. Beschrijvend: De naam geeft duidelijk aan dat het om een lijst van artikelen gaat. Dit maakt het meteen begrijpelijk voor andere ontwikkelaars die de code bekijken.
  2. Kleine letters: De naam is in kleine letters geschreven, wat consistent is met de BEM-conventie.
  3. Koppeltekens: De woorden zijn gescheiden door koppeltekens. Dit zorgt voor een consistente en leesbare naamgeving in zowel HTML als CSS.
  4. Gemakkelijk te identificeren: Het gebruik van een bloknaam maakt het eenvoudig om dit specifieke blok in je HTML- en CSS-code te identificeren en stijlen toe te passen. Bovendien draagt het bij aan de duidelijkheid en begrijpelijkheid van je codebase, wat vooral handig is wanneer je met meerdere ontwikkelaars samenwerkt of je code in de toekomst moet onderhouden.

<div class="navbar"></div> (Correcte bloknaam)
<div class="MainNavigation"></div> (Foute bloknaam)

Elementen in BEM

In BEM verwijzen "elementen" naar kleinere delen van een "blok". Een "blok" is een zelfstandig, herbruikbaar component op een webpagina, zoals een navigatiebalk of een knop. Een "element" is een onderdeel van dat blok en wordt gebruikt om specifieke delen van het blok te stijlen en te targeten. Elementen worden genest binnen het blok en worden gekenmerkt door een dubbele underscore in hun class-naam.

Bijvoorbeeld, in de BEM-notatie voor een knop binnen een navigatieblok zou het "knop" element van het "navigatie" blok er zo uitzien:


              

Hier wordt "navigatie" beschouwd als het blok en "knop" als het element binnen dat blok. Dit helpt bij het scheiden van stijlen en zorgt voor een duidelijke hiërarchie van componenten.

Verschil tussen BEM-elementen en HTML-elementen

Het belangrijkste verschil tussen BEM-elementen en HTML-elementen is hun context en functie. BEM-elementen zijn specifiek voor de BEM-methodologie en worden gebruikt om onderdelen van een blok te benoemen en te stijlen. HTML-elementen zijn ingebouwde bouwstenen van webpagina's met vooraf bepaalde betekenis en stijlen.




Modifiers

Modifiers: Het toevoegen van variaties aan blokken en elementen

In de BEM-methodologie speelt het concept van "modifiers" een cruciale rol bij het creëren van gevarieerde stijlen en toestanden voor blokken en elementen. Modifiers bieden een flexibele manier om verschillende weergaven van dezelfde component te definiëren zonder de basisstructuur te verstoren. Laten we dieper ingaan op wat modifiers zijn en hoe ze worden toegepast.

Het doel van modifiers

Modifiers hebben als doel om variaties aan te brengen in de visuele stijl of gedragstoestand van zowel blokken als elementen. Hierdoor kunnen we bijvoorbeeld een knop een andere kleur geven om onderscheid te maken tussen primaire acties en secundaire acties, of een blok in een "actieve" toestand zetten om aan te geven dat het momenteel geselecteerd is.

De notatie van modifiers

Om een modifier aan te duiden, worden klassenamen met dubbele streepjes toegevoegd aan de blok- of elementnaam. Dit benadrukt visueel dat het om een variatie of modificatie van het originele component gaat. Bijvoorbeeld, als we een knop willen definiëren met een secundaire stijl, zouden we de "button" bloknaam combineren met de "secondary" modifier als volgt:



Contextuele Aanpassing met modifiers

Modifiers stellen ons in staat om contextuele aanpassingen te maken zonder dat we afzonderlijke blokken of elementen hoeven te dupliceren. Stel je bijvoorbeeld een "notificatie" blok voor met verschillende toestanden zoals "succes", "waarschuwing" en "fout". In plaats van drie afzonderlijke blokken te maken, kunnen we dezelfde notificatie bloknaam gebruiken met de juiste modifiers:


        
Het voordeel van modifiers

Het gebruik van modifiers versterkt de herbruikbaarheid van componenten, aangezien we meerdere weergaven of toestanden van een blok of element kunnen definiëren binnen één enkele klasse. Dit vereenvoudigt de onderhoudsinspanning en vermindert duplicatie van code.

Kortom, modifiers zijn een krachtig hulpmiddel binnen de BEM-methodologie dat ons in staat stelt om componenten flexibel en uitgebreid te stylen en gedrag te geven. Door duidelijk en consistent gebruik van modifiers blijft je codebase gestructureerd en gemakkelijk te begrijpen, waardoor het ontwikkelen en onderhouden van webprojecten efficiënter wordt.


<button class="button">Submit</button>
<button class="button button--primary">Submit</button>(Modifier voor primaire stijl)
<button class="button button--secondary">Cancel</button>(Modifier voor secundaire stijl)

Door de BEM-nomenclatuur correct toe te passen, zorg je ervoor dat je CSS-klassen begrijpelijk en consistent zijn, wat bijdraagt aan een georganiseerde en onderhoudbare codebase.

2.1 Blokken en elementen

In dit hoofdstuk gaan we dieper in op het concept van blokken en elementen binnen de BEM-methodologie. We zullen bespreken hoe deze dienen als de bouwstenen van gestructureerde CSS en hoe je ze kunt toepassen in je projecten.

Wat zijn blokken en elementen?

Blokken zijn onafhankelijke, herbruikbare componenten van je website. Ze vertegenwoordigen grotere delen van de interface, zoals navigatiebalken, zijpanelen en kaarten. Elementen zijn onderdelen van deze blokken, nauw verwant aan de context van het blok. Ze vormen de kleinere delen binnen een blok.

Hoe blokken en elementen te structureren

Om blokken en elementen te structureren, gebruik je duidelijke en betekenisvolle klassenamen volgens de BEM-nomenclatuur. Bloknamen worden direct toegepast op HTML-elementen en elementen worden genest binnen de blokken. Hierdoor ontstaat een overzichtelijke hiërarchie van stijlen.

Praktische voorbeelden

Laten we eens kijken naar enkele praktische voorbeelden. Stel dat we een blogpagina hebben met een zijbalk en een lijst met recente artikelen. Hier zou de zijbalk het blok zijn, en de lijst met artikelen zou een element zijn.


<div class="sidebar">
    <ul class="sidebar__recent-articles">
        <li class="sidebar__article-item">Article 1</li>
        <li class="sidebar__article-item">Article 2</li>
    </ul>
</div>

Door deze structuur wordt het gemakkelijker om de stijlen van blokken en elementen te beheren en te begrijpen.

2.2 Modifiers en variaties

In dit hoofdstuk zullen we ons richten op het gebruik van modifiers om variaties aan te brengen in de stijl en het gedrag van blokken en elementen binnen de BEM-methodologie. Hiermee kun je flexibele en herbruikbare componenten creëren.

Het belang van modifiers

Modifiers zijn klassen die worden gebruikt om verschillende variaties van een blok of element aan te duiden. Deze variaties kunnen betrekking hebben op visuele stijlen, toestanden, of zelfs interacties. Modifiers helpen bij het creëren van dynamische en aanpasbare componenten.

Modifiers toepassen

Modifiers worden aangegeven met klassenamen die beginnen met de naam van het blok of element, gevolgd door een dubbele streepjes en de naam van de modifier. Dit patroon maakt het gemakkelijk om de relatie tussen het basisblok/element en de variatie te begrijpen.

Praktijkvoorbeelden

Laten we eens kijken naar een voorbeeld met knoppen. Stel dat we knoppen willen maken met verschillende stijlen, zoals primair en secundair.


<button class="button">Normale knop</button>
<button class="button button--primary">Primaire knop</button>
<button class="button button--secondary">Secundaire knop</button>

Door gebruik te maken van modifiers, kunnen we eenvoudig verschillende stijlvariaties toepassen zonder de structuur van onze HTML te veranderen.

3.1 Onderhoud en schaalbaarheid

In dit hoofdstuk bespreken we de voordelen van gestructureerde CSS voor onderhoud en hoe de BEM-methodologie bijdraagt aan het creëren van schaalbare en uitbreidbare codebases.

Voordelen van gestructureerde CSS

Gestandaardiseerde CSS-opmaak, zoals die wordt aangemoedigd door BEM, draagt bij aan gemakkelijker onderhoud van je code. Door consistente klassenamen te gebruiken en een duidelijke hiërarchie te handhaven, kun je snel en efficiënt wijzigingen aanbrengen in de stijl van je website zonder ongewenste neveneffecten.

BEM en schaalbaarheid

De BEM-methodologie bevordert het scheiden van componenten in duidelijk afgebakende blokken en elementen. Dit bevordert schaalbaarheid doordat je modules kunt hergebruiken en ze gemakkelijk kunt toevoegen of aanpassen zonder inmenging in andere delen van je codebase. Hierdoor wordt het ontwikkelen van grotere en complexere websites een georganiseerd proces.

Samenwerking en begrip

In dit hoofdstuk gaan we dieper in op hoe de BEM-methodologie de samenwerking tussen ontwikkelaars en designers verbetert en hoe het bijdraagt aan een beter begrip van de codebase binnen het hele team.

Samenwerking tussen ontwikkelaars en designers

Doordat BEM een gestandaardiseerde manier van klassenamen en structuur introduceert, wordt de communicatie tussen ontwikkelaars en designers duidelijker. Ontwerpers kunnen direct zien hoe hun ontwerpelementen worden vertaald naar CSS-klassen, terwijl ontwikkelaars gemakkelijker kunnen begrijpen welke stijlen bij welke delen van de interface horen.

Beter begrip van de codebase

Het hanteren van een consistente methodologie zoals BEM maakt het gemakkelijker voor nieuwe teamleden om de codebase te begrijpen. Met duidelijke namen voor blokken, elementen en modifiers wordt het lezen en aanpassen van code intuïtiever, wat resulteert in een kortere leercurve voor nieuwe teamleden en een betere code-onderhoudsperiode.

4.1 Een BEM-project opzetten

In dit hoofdstuk gaan we dieper in op de praktische stappen die nodig zijn om een project op te zetten met behulp van de BEM-methodologie. Het op de juiste manier opzetten van je project legt de basis voor een gestructureerde, schaalbare en onderhoudbare codebase.

Stapsgewijze gids voor het opzetten van een BEM-project

Een effectief BEM-project begint met een solide basis. Volg deze stappen om je project op de juiste manier op te zetten:

  1. Bestandsstructuur: Begin door je bestanden goed te organiseren. Maak mappen aan voor verschillende delen van je CSS-code, zoals blokken, elementen, modifiers en gemeenschappelijke stijlen. Op deze manier blijft alles overzichtelijk gescheiden.
  2. Blok- en elementnamen: Geef je blokken en elementen namen die duidelijk omschrijven wat ze doen. Dit helpt niet alleen jou, maar ook andere ontwikkelaars om te begrijpen welke rol elk onderdeel speelt en om efficiënt te werken.
  3. HTML-structuur: Gebruik de BEM-namengeving wanneer je HTML schrijft. Plaats elementen binnen blokken en zorg ervoor dat de structuur logisch en consistent is. Dit maakt het gemakkelijker om te begrijpen hoe verschillende delen van de interface met elkaar samenwerken.
  4. CSS-organisatie: Volg de BEM-principes bij het schrijven van je CSS-code. Maak aparte bestanden voor blokken, elementen en modifiers. Houd de stijlen modulair en vermijd te diepe nesting om je code eenvoudig te houden en goed te begrijpen.

Door deze stappen te volgen, creëer je niet alleen een gestructureerde codebase, maar leg je ook de basis voor een efficiënt en goed georganiseerd ontwikkelproces.

Geavanceerde BEM-technieken

In dit hoofdstuk zullen we dieper ingaan op enkele geavanceerde BEM-technieken die van pas komen bij complexe situaties en in real-world projecten. Deze technieken stellen je in staat om meer gecompliceerde interfaces effectief te beheren en de volledige voordelen van de BEM-methodologie te benutten.

Dieper ingaan op nesting

In sommige gevallen zul je te maken krijgen met geneste elementen binnen blokken en elementen. Bij het toepassen van BEM-namen binnen deze geneste structuren, is het essentieel om consistent te blijven. Gebruik duidelijke en ondubbelzinnige namen voor zowel de blokken als de geneste elementen om verwarring en onnodige complexiteit te voorkomen.

Herbruikbare componenten

Een van de krachtigste aspecten van BEM is de mogelijkheid om herbruikbare componenten te creëren. Dit bevordert een modulaire aanpak en minimaliseert de hoeveelheid herhaalde code. Om deze techniek effectief te gebruiken, identificeer delen van je web interface die potentieel herbruikbaar zijn en structureer ze als blokken en elementen. Dit stelt je in staat om deze componenten gemakkelijk op verschillende delen van je website te implementeren.

Tips voor effectief gebruik van BEM

Hier zijn enkele tips om het meeste uit de BEM-methodologie te halen in complexe situaties en real-world projecten:

  • Consistentie: Blijf consistent met je BEM-namen en structuur om verwarring te minimaliseren en een uniforme codebase te behouden.
  • Documentatie: Documenteer je blokken, elementen en modifiers om het begrip voor jou en andere teamleden te vergroten. Goede documentatie bevordert de samenwerking en kennisoverdracht.
  • Oefening: Blijf oefenen met het schrijven van BEM-code om jezelf vertrouwd te maken met de methodologie en om je vaardigheden te verbeteren.

Met deze geavanceerde BEM-technieken kun je complexe projecten beheren en tegelijkertijd genieten van de voordelen van georganiseerde, herbruikbare en onderhoudbare CSS-code.

Naar boven