Hoe houd je code overzichtelijk, zorg je ervoor dat je geen onbedoelde elementen beïnvloed en andere programmeurs ook jouw code kunnen begrijpen? Dit zijn een aantal vragen die voorkomen als je gaat samenwerken aan een project. In een van de eerste CSS-lessen werd er verteld over BEM, waar ik nog niet veel van begreep. Ik besloot verder onderzoek te doen om erachter te komen of ik BEM kan gebruiken tijdens het samenwerken in de meesterproef.

BEM staat voor “Block”, “Element”, “Modifier”. In BEM is elke lay-out opgedeeld in blokken. Omdat de blokken onafhankelijk zijn, kunnen ze parallel worden ontwikkeld door verschillende ontwikkelaars. Zeker bij grote, complexere code kan dit helpen. Zie bijvoorbeeld de volgende afbeelding. Een website kan je opdelen in blokken zoals de header, navigation, main, footer. In deze blokken kunnen ook weer andere blokken zitten zoals een zoekblok of inlogblok. In deze laatste blokken zitten elementen, zoals een inputveld en verzendbutton. Met modify wordt bedoeld dat specifieke blokken aangepast kunnen worden door er styling of functies aan mee te geven.

Bron: https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

Wanneer elk blok een duidelijke (class) naam heeft, kan je hier makkelijk over communiceren. Een project-manager kan bijvoorbeeld vragen om de het "search" blok wat groter te maken. Zorg ervoor dat de naam van een blok uniek is om dubbelzinnigheid te voorkomen. Een blok kan wel meerdere keren herhaald worden zoals bijvoorbeeld het blok met inputveld en zoekbutton.

Om een blok in een blok te wijzigen, verwijderen of toe te voegen, moet het blok onafhankelijk zijn. Dat betekend dat:

• Geef een unieke naam aan een class
• Gebruik geen HTML elementen als classname
• Vermijd het aanspreken van meerdere verschillende blokken tegelijk

Je kan in CSS elementen nesten in het blok. Zo houd je de code uniek gekoppeld aan dat element en het houd de code een stuk overzichtelijker. Geef deze elementen een classname beginnend met de classname van het blok, gevolgd door 2 onderliggende streepjes en daarna de elementnaam. Dit helpt onbedoelde "cascading" te voorkomen.

<ul class="menu">
  <li class="menu__item">
    ...
  </li>
  <li class="menu__item">
    ...
  </li>
</ul>

Een blok kan meerdere keren gebruikt worden. Bijvoorbeeld het menu blok, kan in de header en in de footer voorkomen. Dit kan ook handig zijn voor JS. Door een class-selector te gebruiken kan hetzelfde gedrag op dit blok worden toegepast. Voor het hergebruiken zijn classes nodig, geen id's. Id's mag je niet hergebruiken.

Soms wil je een blok hergebruiken op een net iets andere manier dan het bestaande blok. Dan kan een "modifier" handig zijn. Een modifier is een eigenschap van een blok of een element dat het uiterlijk of gedrag verandert. Een modifier heeft zowel een naam als een waarde. Er kunnen meerdere modifiers tegelijk worden gebruikt.

Zie dit voorbeeld. Het geselecteerde element heeft een ander uiterlijk/gedrag dan de andere elementen. Aan dit geselecteerde element wordt een extra class meegegeven: "menu__item_state_current"

Bron: https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

<div class="menu">
  <ul class="menu__layout">
    <li class="menu__layout-unit">
      <div class="menu__item">Index</div>
    </li>
    <li class="menu__layout-unit">
      <div class="menu__item menu__item_state_current">Products</div>
    </li>
    <li class="menu__layout-unit">
      <div class="menu__item">Contact</div>
    </li>
  </ul>
</div>

Als een block meerdere keren wordt gebruikt in het document heet dit Multilingualism. De weergave en de functionaliteit van het blok kan geimplementeerd worden op andere delen van de website.

Wanneer de site uit meerdere mensen bestaat, groeit en wijzigt, kunnen blokken opgeslagen worden onder verschillende bestanden. Geef bestanden die over hetzelfde blok gaan dezelfde naam zoals menu.js en menu.css. JS en CSS bestanden zitten bij elkaar in dezelfde map en zijn niet meer gescheiden van elkaar. Dit is handig om code her te gebruiken voor een nieuw project, de hele map kan worden gekopierd. De blokken of elementen in een ander blok kunnen worden opgeslagen in een sub-map. Zie ook dit voorbeeld

menu/
  __item/
    _state/
      menu__item_state_current.css
    menu__item.css
  menu.css
  menu.js

In BEM kunnen blokken apart van elkaar worden getest voordat het wordt toegevoegd aan het document. Het is gemakkelijk om eerst de één blok te controleren of het juist werkt en vervolgens het project samen te stellen uit geteste blokken.

Voor samenwerken is BEM een fijne methode doordat alle code goed en duidelijk gescheiden is. Ieder kan aan een aparte map werken met een eigen blok, zo zit je elkaar niet in de weg. Ik vond het erg handig om CSS-code te nesten en classes specifieke namen mee te geven met de dubbele underscores. Het zal in het begin wel even wennen zijn dat CSS en JS files niet meer gescheiden zijn in een map maar per blok bij elkaar. Ik zag dit eerder terug bij frameworks zoals Angular. Ik denk dat veel bedrijven op deze manier zullen werken.

• Stepanova, V. (2012, 16 april). BEM: A New Front-End Methodology. Geraadpleegd van: https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/.
• Belaya, I. (2018, 18 juni). BEM For Beginners: Why You Need BEM. Geraadpleegd van: https://www.smashingmagazine.com/2018/06/bem-for-beginners/