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.
.navbar of .button..navbar__button of .list__item..button--blue of .item--selected.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.
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.
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:
<div class="navbar"></div> (Correcte bloknaam)
<div class="MainNavigation"></div> (Foute bloknaam)
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.
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: 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.
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.
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:
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 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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Een effectief BEM-project begint met een solide basis. Volg deze stappen om je project op de juiste manier op te zetten:
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.
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.
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.
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.
Hier zijn enkele tips om het meeste uit de BEM-methodologie te halen in complexe situaties en real-world projecten:
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