BEM: De CSS-methodologie van Yandex die de Front-End Revolutie maakte

In het begin van de jaren 2010, toen webapplicaties steeds complexer werden en front-end ontwikkelingsteams groeiden, bracht het beheer van CSS grote uitdagingen met zich mee op het gebied van onderhoudbaarheid, herbruikbaarheid en samenwerking. In deze context heeft het front-end team van Yandex, de Russische techgigant die vaak de "Russische Google" wordt genoemd, een robuuste methodologie geconceptualiseerd en geïmplementeerd: BEM (Block, Element, Modifier).

De Oorsprong bij Yandex: Tussen 2010 en 2012

Geconfronteerd met de noodzaak om complexe gebruikersinterfaces te ontwikkelen en te onderhouden voor diensten zoals de zoekmachine, kaartdiensten of e-mail, had Yandex behoefte aan een systematische aanpak om hun CSS-code te organiseren. De BEM-methodologie is ontstaan uit deze pragmatische vereiste, waardoor ontwikkelaars aan massale projecten konden werken zonder dat de code veranderde in een onbeheersbare kluwen van conflicterende en moeilijk aan te passen stijlen.

Het concept werd tussen 2010 en 2012 geformaliseerd en gedocumenteerd door het front-end ontwikkelingsteam van Yandex, waarna het aan populariteit won en werd overgenomen door een brede gemeenschap van ontwikkelaars over de hele wereld.

De Kernprincipes van BEM

BEM stelt een benadering voor voor het benoemen van CSS-klassen op basis van drie afzonderlijke entiteiten:

• Block (Blok): Een autonoom, onafhankelijk en herbruikbaar component. Het kan elke betekenisvolle entiteit van de interface zijn, zoals een knop, een menu, een koptekst of een voettekst. Bloknamen zijn over het algemeen enkelvoudige of meervoudige zelfstandige naamwoorden die de entiteit vertegenwoordigen (bijv. .button, .header).
• Element (Element): Een onderdeel van een blok dat niet onafhankelijk gebruikt kan worden. Elementen zijn semantisch verbonden met hun bovenliggende blok (parent block). Hun naam wordt gevormd door twee underscores toe te voegen aan de naam van het blok (bijv. .button__icon, .header__logo).
• Modifier (Modificator): Een vlag of status die het uiterlijk of het gedrag van een blok of element definieert. Modificatoren worden gebruikt voor specifieke variaties. Hun naam wordt gevormd door twee koppeltekens toe te voegen aan de naam van het blok of element (bijv. .button--primary, .button__icon--large).

Waarom is BEM Overgenomen?

De overname van BEM door Yandex, en vervolgens door een bredere gemeenschap, kan worden verklaard door verschillende belangrijke voordelen:

• Modulariteit en Herbruikbaarheid: Elk blok is onafhankelijk, wat het hergebruik ervan in verschillende delen van de applicatie of zelfs in andere projecten vergemakkelijkt.
• Voorspelbaarheid: De strikte naamgevingsconventies maken de code gemakkelijker te lezen en te begrijpen. Een ontwikkelaar kan de functie en de reikwijdte (scope) van een klasse afleiden door simpelweg de naam te lezen.
• Schaalbaarheid: BEM maakt het mogelijk om zeer grote CSS-codebases te beheren zonder naamsconflicten of specificiteitsproblemen te veroorzaken, wat cruciaal is voor grootschalige projecten.
• Geautomatiseerde en Vergemakkelijkte Samenwerking: Met duidelijke regels kunnen teams efficiënter samenwerken, wat het risico verkleint op het overschrijven van het werk van anderen of het veroorzaken van ongewenste bijwerkingen (side effects).
• Onderhoudbaarheid: De duidelijke structuur en de lage specificiteit van BEM-selectoren maken wijzigingen en debugging eenvoudiger en minder risicovol.

De Erfenis van BEM

Hoewel er sinds die tijd andere CSS-methodologieën zijn ontstaan (zoals CSS Modules, Styled Components of Tailwind CSS), blijft BEM een fundamenteel referentiepunt en een belangrijke inspiratiebron. De bijdrage ervan aan de structurering van CSS en het oplossen van schaalbaarheidsproblemen in grote front-end projecten is onmiskenbaar en heeft een blijvende stempel gedrukt op de moderne webontwikkelingspraktijken.