Maak van een BEM-element een component wanneer het een samenhangend doel heeft en de implementatie ervan buiten het bovenliggende blok kan beheren. Gebruik de lokale Mac-oefening hieronder om die grens te toetsen voordat je klassen hernoemt of CSS verplaatst.

Wat maakt een element onafhankelijk?

Voor iemand die een zelfgeschreven HTML-pagina onderhoudt, is de praktische vraag of een groeiende sectie onderdeel moet blijven van het bovenliggende element of een afzonderlijk onderhouden blok moet worden. BEM definieert een blok als een logisch en functioneel onafhankelijk component; een element hoort bij een blok en kan daar niet onafhankelijk van worden gebruikt. Blokken mogen andere blokken bevatten. Kernbegrippen

Neem een synthetische pagina met een workbench-blok. Het workbench__preview bevat een abstracte vorm, een label en een bijschrift. Aanvankelijk dienen ze alle drie alleen de werkbank. Later is dezelfde preview nodig in een smalle shelf-sectie. Die tweede plaatsing geeft je een concrete extractietaak: bepaal of de preview een shape-tile-blok kan worden met een eigen uiterlijk en interne structuur.

De diepte bepaalt dit niet. BEM staat geneste elementen in de DOM toe, maar houdt hun namen plat: workbench__preview, workbench__label en workbench__caption. Een naam als workbench__preview__caption drukt ten onrechte uit dat een element bij een ander element hoort. De officiële snelstartgids noemt ook een serviceblok als optie wanneer een complex element intern onderdelen nodig heeft die onafhankelijk georganiseerd zijn. Snel aan de slag

Maak onderscheid tussen markup naar een aparte template verplaatsen voor de leesbaarheid en een nieuw BEM-blok introduceren. Je kunt de eerste wijziging doorvoeren zonder meteen voor de tweede te kiezen. Maak de blokgrens expliciet wanneer je kunt beschrijven wat het geëxtraheerde onderdeel beheert, wat de host levert en hoe een andere plaatsing het zal gebruiken.

Gebruik een afhankelijkheidstoets voordat je extraheert

De volgende besliswijzer is een redactionele methode die is afgeleid van BEMs onafhankelijkheidsprincipe. Het is geen officieel scoresysteem. Pas hem toe op één kandidaat-substructuur, in plaats van de hele pagina in één keer te beoordelen.

Vraag Aanwijzing voor extractie Reden om het element te behouden
Heeft het een duidelijk doel? “Toont een vorm met een label en bijschrift” Het doel is alleen “de binnenste wrapper van de werkbank”
Kan het zijn interne presentatie beheren? De rand, tussenruimte en typografie horen bij elkaar Die regels zijn onlosmakelijk verbonden met de structuur van het bovenliggende element
Kan de host de plaatsing afzonderlijk bepalen? De host bepaalt de beschikbare ruimte en de tussenruimte eromheen De kandidaat vereist een specifieke voorouderindeling
Beschrijven de varianten het element zelf? Een compacte tegel is betekenisvol op meerdere plaatsen Elke variant is vernoemd naar een specifiek bovenliggend element
Zou afzonderlijk onderhoud nu helpen? Er bestaat een tweede plaatsing of een substantiële interne verantwoordelijkheid Extractie zou een interface toevoegen zonder huidig gebruik

Schrijf één zin voordat je de code wijzigt: “De shape-tile beheert de vorm, het label, het bijschrift en de interne tussenruimte; de host beheert de plaatsing en beschikbare breedte.” Als die zin steeds meer elementen van de kolomindeling van de werkbank of de volgorde van naastgelegen elementen omvat, bedenk dan opnieuw waar de grens hoort.

Scheid de externe indeling van het interne uiterlijk. Volgens de CSS-richtlijnen van BEM worden externe geometrie en positionering via het bovenliggende element bepaald. Ze laten zien hoe je op hetzelfde element de klasse van een onafhankelijk blok combineert met de klasse van een element van het bovenliggende blok. Die combinatie heet een mix. CSS-methodologie

class="shape-tile workbench__preview" kan bijvoorbeeld beide identiteiten uitdrukken. Laat shape-tile de rand en interne indeling bepalen, en workbench__preview de plaatsing. Ken dezelfde eigenschap niet via beide identiteiten toe, tenzij de overschrijving bewust deel uitmaakt van het contract.

Maak een lokale vergelijking op je Mac

Maak voor deze oefening een nieuwe map aan, zodat je het geëxtraheerde ontwerp kunt vergelijken zonder een bestaande pagina te wijzigen. Je hebt een editor voor platte tekst en een desktopbrowser nodig; voor dit voorbeeld hoef je geen pakketten te installeren, JavaScript te gebruiken of lettertypen of afbeeldingsbestanden te downloaden.

Kies in Teksteditor Archief > Nieuw en vervolgens Opmaak > Maak platte tekst. Plak de HTML hieronder en sla deze op als index.html. Kies indien daarom wordt gevraagd Gebruik .html. Apple documenteert deze stappen en legt ook uit hoe je HTML als broncode opent met Negeer opdrachten voor opgemaakte tekst. Werken met HTML-documenten in Teksteditor op de Mac

Maak het volledige HTML-document

In dit document staat hetzelfde voorgestelde component in twee hosts. Alle labels zijn synthetisch en de abstracte vorm is met CSS getekend. Sla het volgende op als index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Voeg het volledige stijlblad toe

Maak in dezelfde map nog een bestand met platte tekst en noem het styles.css. Controleer of de daadwerkelijke bestandsnaam styles.css is en niet styles.css.txt. Plak het volledige stijlblad:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Open index.html in Safari of een andere desktopbrowser. De bedoeling is dat je een bredere werkbank vergelijkt met een smallere plank. De tegels delen dezelfde componentopmaak; de beschikbare ruimte bepaalt of de vorm en tekst naast elkaar passen of op een nieuwe regel komen.

De koppeling tussen de bestanden is hier van belang: rel="stylesheet" legt een externe stylesheet-resource vast en href="styles.css" verwijst naar het bestand dat dit document nodig heeft. Een BEM-klasse toevoegen legt die resourcekoppeling niet vast. Houd beide bestanden bij elkaar wanneer je de oefening verplaatst. De HTML-standaard definieert deze relatie met stijlbladen. HTML-standaard: koppelingstype “stylesheet”

Hoe zie je of de extractie is gelukt?

Gebruik de vergelijking als diagnostische oefening. De verwachte resultaten hieronder volgen uit de meegeleverde code; het zijn controles die je zelf in je browser uitvoert, geen gerapporteerde browsertestresultaten.

  1. Controleer de uitgangssituatie. Beide tegels moeten een witte achtergrond, een blauwe afgeronde vorm, een label en een bijschrift hebben. Als alles onopgemaakt lijkt, controleer dan eerst de bestandsnaam en koppeling van het stijlblad voordat je de componentgrens beoordeelt.
  2. Verwijder één plaatsingsklasse. Verwijder workbench__preview van de eerste tegel, sla het bestand op en laad de pagina opnieuw. De bovenmarge moet veranderen, terwijl het interne uiterlijk intact blijft.
  3. Verwijder één hostklasse. Verwijder tijdelijk workbench van de omringende sectie. Het hostkader en de vaste breedte moeten verdwijnen; de tegel moet zijn componentstijlen behouden.
  4. Wijzig het gedeelde component. Wijzig de randradius in .shape-tile. Beide exemplaren moeten veranderen zonder dat je een van de hostselectors bewerkt.
  5. Test de inhoud. Vervang een bijschrift door een langere synthetische zin en maak het browservenster smaller. Controleer hoe de tekst wordt afgebroken en of alle tekst zichtbaar blijft.

Interpreteer fouten aan de hand van verantwoordelijkheden. Een ontbrekende rand nadat je de hostklasse verwijdert, betekent dat een componentstijl mogelijk nog in de hostselector staat. Onverwachte ruimte eromheen wijst op plaatsingsregels. Verschillen in tekst kunnen overgeërfde stijlen of globale selectors aan het licht brengen. Los de verantwoordelijke afhankelijkheid op voordat je nog een overschrijving toevoegt.

BEM-namen zorgen niet voor door de browser afgedwongen stijlisolatie. CSS-overerving blijft van toepassing in de documentstructuur: overgeërfde eigenschappen krijgen waarden van het bovenliggende element wanneer de cascade geen waarde voor het element opgeeft. Dit staat in de specificatie voor CSS-cascadering en overerving en wordt toegelicht door MDN. CSS Cascading and Inheritance Module Level 5, sectie 7.2, Overerving

In het voorbeeld worden het lettertype en de tekstkleur van de tegel bewust op het hoofdelement ingesteld. Op een echte pagina kan het juist wenselijk zijn dat de typografie van de site wordt overgeërfd. Noteer dat als afhankelijkheid. Onafhankelijkheid betekent dat de vereiste omgeving begrijpelijk en overdraagbaar is; het betekent niet dat je binnen elk component elke browserstandaard moet nabootsen.

Wanneer behoud je het element?

Behoud de kandidaat als element wanneer de betekenis en implementatie ervan specifiek voor het bovenliggende blok blijven. Een uitlijningswrapper die alleen voor de werkbank wordt gebruikt, kan veel onderliggende elementen hebben zonder een eigen openbare identiteit nodig te hebben. Maak de BEM-namen plat en verbeter de organisatie voordat je een nieuw blok introduceert.

Omgekeerd kan een component ook bij eenmalig gebruik de moeite van extractie waard zijn wanneer de interne verantwoordelijkheid ervan substantieel is en de afhankelijkheidsgrens duidelijk is. Beschouw hergebruik als ondersteunend bewijs, niet als een vereist aantal keren. In deze oefening maakt de tweede plaatsing de grens makkelijker te beoordelen; ze legt geen universele regel van twee toepassingen vast.

Heroverweeg ook een extractie waarbij steeds meer variantspecifieke hostvarianten ontstaan. Namen als shape-tile--inside-workbench wijzen erop dat plaatsing onderdeel wordt van de interface van het component. Vraag eerst of het verschil thuishoort in workbench__preview. Gebruik een componentvariant alleen voor een verschil dat je in de eigen termen van het component kunt uitleggen.

Verandert moderne CSS-scoping de beslissing?

De regel @scope kan beperken waar ingesloten selectors overeenkomen, wat kan helpen bij het beheren van selectors binnen een documentsubstructuur. MDN markeert deze regel momenteel als Baseline 2026, beschikbaar in huidige browserversies sinds maart 2026, en merkt op dat oudere apparaten of browsers mogelijk geen ondersteuning bieden. Ga er niet van uit dat elke Mac-installatie de regel ondersteunt. @scope CSS-at-regel

De meegeleverde oefening gebruikt gewone klasseselectors en vereist geen @scope. Houd essentiële componentstijlen in die regels wanneer je browsers zonder scoping ondersteunt. Scoping kan helpen een grens uit te drukken, maar voor de beslissing over eigenaarschap moet je nog steeds het doel, de afhankelijkheden en de plaatsing van het component helder kunnen beschrijven.

Extraheer het complexe element wanneer je het doel en de interne implementatie samen kunt verplaatsen, de omringende indeling bij de host kunt laten en het resultaat in een andere context kunt laten zien. Als die verantwoordelijkheden nog met elkaar verstrengeld zijn, behoud het element dan terwijl je ze verduidelijkt; een kortere klassenaam alleen voltooit de refactor niet.

Bronnen