21 april 2016

Het belang van naamgevingsmethodieken bij het ontwikkelen van een website

development

Bij W3S maken we grote schaalbare websites, die makkelijk te onderhouden moeten zijn. Alle code wordt georganiseerd opgezet met een herkenbare structuur. Dit wordt gedaan om ervoor te zorgen dat de website ook in de toekomst makkelijk te onderhouden en uit te breiden is. Om hieraan te voldoen hebben we gekozen om een pagina in te delen in blokken, deze blokken zijn modules die eenvoudig kunnen worden aangepast en hergebruikt.

Block Elementen

Als beginnend front-end developer is een van de eerste stappen het leren van de naamgevingsmethodiek die door het team gehanteerd wordt. Wij gebruiken als pre-processor LESS, waarmee we de originele mogelijkheden van CSS uitbreiden, wat structureel een groot voordeel geeft. De naamgevingsmethodiek in de LESS code samen met het verdelen van de code over verschillende LESS bestanden is de belangrijkste manier om een overzichtelijke front-end project structuur op te zetten.

Er zijn vele methodieken die hiervoor gebruikt kunnen worden maar bij W3S hebben wij gekozen voor BEM. BEM staat voor Block-Element-Modifier en staat voor de manier waarop de naamgeving is gekozen. Bij BEM wordt er begonnen met een blok, daarna het element en als laatste een modifier.

Er zijn meerdere redenen om een goede naamgeving/code structuur te kiezen voor de ontwikkeling van een project:

  • Nieuwe collega’s kunnen sneller meewerken aan een project door de duidelijke structuur.
  • Code is eenvoudig terug te vinden door de unieke naamgeving.
  • Code is makkelijk aan te passen door de verminderde afhankelijkheid.
  • Code is eenvoudiger tussen projectleden overdraagbaar door dezelfde opzet.
  • Projecten waar al lange tijd niets aan gedaan is, zijn beter op te pakken.


Toepassing

Om tot een goede toepassing te komen van de BEM methodiek is er een analyse nodig van het design. Ter illustratie zal gebruik gemaakt worden van het winkelmandje van de website van Bol.com.

Een goed startpunt is het onderscheid maken tussen de verschillende elementen op de pagina. De keuze tussen wel of niet scheiden komt neer op de gewenste herbruikbaarheid. In dit geval zou ervoor gekozen kunnen worden om dit 'blok' te scheiden in verschillende onderdelen:

  1. Het eerste blok zou herbruikt kunnen worden in de vervolgstappen van het bestelproces. Volgens BEM structuur zou dit blok bijvoorbeeld 'block-shoppingcart__header' kunnen heten in de code. Volgende deze naamgeving zou er een restrictie worden opgelegd dat de code alleen in de 'shoppingcart' mag worden gebruikt. Het is niet logisch om op een contactpagina ineens een 'shoppingcart' te zien. Mocht dit wel gewenst zijn dan zou de naamgeving aangepast moeten worden naar een minder specifieke verwijzing.
  1. Het centrale blok kan voor ieder product opnieuw gevuld worden met data, maar zal structureel hetzelfde zijn. Bijvoorbeeld als 'block-shoppingcart-product', hiervan kunnen er eenvoudig meerdere op dezelfde pagina staan. Het moet mogelijk zijn om het winkelmandje met meerdere producten te vullen.
  1. Het onderste blok is net als het eerste blok eenvoudig herbruikbaar gedurende het bestelproces. Op een overzichtspagina kan hier een variant op worden gemaakt, waarbij enkel de knop niet zichtbaar is of er andere modificaties zijn doorgevoerd. Een naam voor dit blok zou 'block-shoppingcart__total' kunnen zijn.


In de LESS

Door de naamgeving zitten er een aantal restricties aan de herbruikbaarheid van de code:

  • Het zijn blokken
  • Unieke naam

Let hierbij op dat het niet te generiek moet zijn zodat het wel eenvoudig terug te vinden is, maar ook niet te specifiek zodat bij hergebruik telkens een aanpassing in de naamgeving nodig is.

De syntax van een enkele dash (-) staat voor een naam, dubbele dash (--) staat voor een modificatie, en underscores (__) staan voor een genest blok in de code.

Het organiseren van de less code zou in dit geval, doordat het relatief kleine onderdelen zijn, in een shoppingcart.less gedaan worden. Zijn er veel pagina’s of uitgebreidere pagina’s dan is een goede keuze om het op te splitsen in verschillende LESS files.

In het onderstaande voorbeeld wordt er de aanname gedaan dat er een ‘.block-shoppingcart__total’ in het rood en in het blauw nodig is. Dit is zichtbaar door de toegevoegde modifier. De LESS code zonder modifier bevat de standaard styling en de modifier klasses bevatten enkel de aanpassingen.

In de LESS is dit eenvoudig op de volgende manier te structureren:

.block-shoppingcart{
       .block-shoppingcart__header{
       }
       .block-shoppingcart__product{
       }
       .block-shoppingcart__total{                    
       }
       .block-shoppingcart__total--blue{
       }
       .block-shoppingcart__total--red{
       }
}

Conclusie

Door de html structuur deels op te nemen in de naamgeving van de klasse is het nesten van de LESS code minimaal. Door de specifieke naamgeving is het eenvoudig om terug te vinden op welke plaatsen in het project het betreffende blok gebruikt is. Bij het schrijven van media queries wordt op een zelfde laag niveau genest waardoor deze aanpassingen bij verschillende scherm resoluties erg overzichtelijk blijven.

Deze manier van werken zorgt ervoor dat we de goed inspelen op de wensen en behoeften van de klant, terwijl we het onszelf ook makkelijker maken. Wil je op de hoogte blijven op het gebied van development? Schrijf je dan in voor onze nieuwsbrief onderaan de pagina!

Geschreven door: Jelle Van der Waals
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.