BEM en CSS-naamgeving, met een builder voor classnamen | We.Inc
Hoe BEM blocks, elements en modifiers benoemt, met een builder die uw classnamen controleert. Vergelijk BEM met utility classes, CSS Modules en @scope.
BEM en naamgevingsconventies voor CSS
BEM staat voor Block, Element, Modifier. Een block is een zelfstandige component zoals .card, een element is een onderdeel dat alleen binnen dat block zin heeft, geschreven als .card__title met twee underscores, en een modifier is een variant, geschreven als .card--featured met twee koppeltekens. Modifiers worden naast de basisclass toegevoegd, nooit in plaats ervan.
BEM in één tabel
Onderdeel
Patroon
Voorbeeld
Block
.search-form
Element
block__element
.search-form__input
Block-modifier
block--modifier
.search-form--compact
Element-modifier
block__element--modifier
.search-form__button--disabled
Modifier met sleutel en waarde
block--key-value
.search-form--theme-dark
Bij naamgeving blijft een CSS-project netjes of verandert het langzaam in een stapel overrides. Deze pagina legt de BEM-regels uit volgens de officiële BEM-site, controleert uw eigen classnamen terwijl u typt en vergelijkt BEM met de andere manieren waarop teams vandaag voorkomen dat stijlen botsen.
Typ in de builder een blocknaam en eventueel een element en een modifier.
Lees de gegenereerde classnamen en de HTML die ze gebruikt. Er verschijnen waarschuwingen als een naam een BEM-regel overtreedt.
Kopieer het skelet van HTML en CSS naar uw component.
Selecteer alleen met de enkele class. .card .card__title voegt specificiteit toe die BEM juist wil vermijden.
Koppel elements nooit aan elkaar zoals .card__body__title. Elk element hoort direct bij het block, hoe diep het ook in de HTML zit.
Houd de basisclass naast een modifier: class="btn btn--large", niet alleen class="btn--large".
Benoem dingen naar wat ze zijn, niet naar hoe ze eruitzien. .alert--error overleeft een redesign; .alert--red niet.
Kies één conventie per project en leg die vast. Een mix van stijlen is lastiger te lezen dan welke afzonderlijke stijl ook.
Veelgestelde vragen
Waar staat BEM voor?
Block, Element, Modifier. Het is een naamgevingsmethode voor CSS-classes die elke selector beperkt tot één class, zodat de specificiteit vlak blijft en u aan een classnaam kunt zien bij welke component hij hoort.
Waarom gebruikt BEM dubbele underscores en dubbele koppeltekens?
Enkele koppeltekens worden al binnen namen gebruikt, zoals in search-form. Door de scheidingstekens te verdubbelen, is de grens tussen block, element en modifier eenduidig, zodat .search-form__submit-button leest als één block en één element.
Is BEM nog zinvol met Tailwind of CSS Modules?
Met utility classes schrijft u zelden classnamen voor componenten, dus BEM doet er minder toe. Met CSS Modules geeft de buildtool namen een eigen scope, en korte namen in camelCase worden aangeraden. BEM blijft een sterke keuze voor gewone CSS, Sass, WordPress-thema's en design systems die over frameworks heen worden gedeeld.
Hoe benoem ik een element binnen een element?
Koppel het aan het block, niet aan het bovenliggende element. Een titel in de body van een kaart is .card__title, ook als de HTML hem in .card__body nest. Als het geneste deel op zichzelf herbruikbaar is, maak er dan een nieuw block van.
Het probleem dat naamgevingsconventies oplossen
Elke CSS-class leeft in één globale namespace. Twee developers die in verschillende bestanden .title schrijven, gaan uiteindelijk elkaars koppen stylen, en de gebruikelijke oplossing, een langere selector, begint een wapenwedloop in specificiteit.
Een conventie geeft elke class een eigenaar. Als .pricing-card__price zich misdraagt, weet u welke component u moet openen, en u kunt de component verwijderen in de wetenschap dat de classes nergens anders worden gebruikt.
Als blocks blocks bevatten
Een block kan in een ander block staan. Een knop in een kaart blijft .btn, en als de kaart hem moet positioneren, kan hetzelfde element beide classes dragen: class="btn card__action".
Deze mix houdt de eigen stijlen van de knop herbruikbaar, terwijl de kaart via zijn element-class alleen de layout regelt, zoals margin of uitlijning.
Native scoping in CSS haalt in
Met @scope beperkt u regels tot een subtree, bijvoorbeeld alles binnen .card maar niet binnen een geneste .card__media. Het werd in 2026 Baseline als nieuw beschikbaar, dus controleer de browsers van uw publiek voordat u er alleen op vertrouwt.
Cascade layers lossen een verwant probleem op: ze laten u hele groepen stijlen rangschikken, zodat een reset of een thema van derden nooit boven uw componenten uitkomt, hoe specifiek de selectors ook zijn.
BEM vergeleken met andere aanpakken
Manieren om te voorkomen dat classnamen botsen
Aanpak
Voorbeeld
Wie houdt namen uniek
Past het best bij
BEM
.card__title--large
U, via een conventie
Gewone CSS, Sass, CMS-thema's
Utility classes (Tailwind)
text-lg font-semibold
Geen componentnamen nodig
Apps opgebouwd uit componenten
CSS Modules
styles.cardTitle
De buildtool herschrijft namen
React, Vue en vergelijkbare tools met een bundler
@scope
@scope (.card) { h2 {} }
De browser begrenst de regels
Nieuwere browsers, lichte markup
Een volledige BEM-component
Card-block met elements en modifiers
Elke selector is één class. De modifier featured wijzigt de rand en laat één element reageren via de block-modifier.
Veelgemaakte BEM-fouten
Fout en goed
Fout
Goed
Waarom
.card__body__title
.card__title
Elements horen bij het block, niet bij andere elements
class="card--featured"
class="card card--featured"
Een modifier heeft zijn basisclass nodig
.card .card__title
.card__title
Extra nesting voegt specificiteit toe
div.card__title
.card__title
BEM-selectors gebruiken alleen classnamen
.card--blue
.card--primary
Benoem de betekenis, niet de kleur
Builder voor BEM-classnamen
Typ een block, element en modifier om classnamen met bijpassende HTML en CSS te krijgen, met waarschuwingen als een naam een regel overtreedt.
Block
Element (optioneel)
Modifier (optioneel)
Block
Element
Modifier
{label}: voeg zelf geen __ of -- toe; de builder voegt de scheidingstekens toe.
{label}: gebruik kleine Latijnse letters, cijfers en enkele koppeltekens.