Samen toekomstbestendig ontwikkelen.

Een website ontwikkelen doe je niet alleen, je werkt samen met collega's en na de oplevering van de eerste versie is het zomaar mogelijk dat er extra onderdelen gemaakt gaan worden. Als er op dat moment geen structuur in je code zit heb je een probleem.

Door gebruik van de BEM methode samen met de regels van ATOM design voorkom je dubbele code en blijft alles overzichtelijk. Ook voor andere ontwikkelaars.

ATOM design

ATOM design geeft structuur aan je code. Het deelt de code op in Atoms, Modules, Organisms, Templates en uiteindelijk pagina's. Een pratisch voorbeeld:

Een header is een organism dat uit meerdere moleculen bestaat. Namelijk Een menu, een zoekfunctie en een logo. Deze onderdelen/moleculen bestaan vervolgens uit meerdere atomen. Namelijk een menu item, of een invoerveld.

Door SCSS bestanden op te splitsen in deze 'categorie' mappen zul je al snel overzicht krijgen over waar bepaalde code gevonden kan worden. Een groot project kan namelijk uit tientallen verschillende SCSS bestanden bestaan.

BEM methode

Naast een goede structuur in je bestanden is de benaming eigenlijk het belangrijkst van allemaal. Iemand anders moet de code ook kunnen gebruiken. BEM staat voor Block, Element and Modifier.

Een block is iets wat los staat van zichzelf zoals een header of input veld. Een element is onderdeel van een block en wordt dus nooit los gebruikt. Als laatst heb je nog uitzonderingen op je blokken en/of elementen. Denk aan de disabled state, of misschien wil je het blok highlighted maken.

Een block is een beschrijvende css class, een voorbeeld zou zijn "menu", wat zoals verwacht een menu zal bevatten. Een element daarbinnen is "menu__item". Je herkent een element door de twee underscores. Als laatst kan het zijn dat je meerdere menu's hebt en voor het tweede menu een uitzondering wilt maken. Dat kan via "menu--state-collapsed".

Bronnen