Atomic design - technische implementatie

Hoe kun je CSS zo schrijven dat het modulair, correct en te onderhouden is? Dit is een vraag die bij elke front-end ontwikkelaar speelt, hoe kun je op een goede manier code schrijven zodat het te begrijpen en makkelijk te gebruiken is voor een collega. Daarom wil ik graag behandelen hoe we atomic design technisch kunnen realiseren met het gebruik van BEM en Sass.

Wat is BEM?

BEM staat voor Block, Element, Modifier. Dit is een methode waarmee je gemakkelijk atomen kunt aanspreken die goed zijn voor hergebruik.

Block: Opzichzelfstaand atoom die je kunt gebruiken als class.

Element: Onderdeel van het block, semantisch gezien altijd gebonden onder het block.

Modifier: Een alternatief op een block of element, dit kun je gebruiken om interactie of visuele verschillen te maken.

Wat is Sass?

Sass is een extensieve taal op CSS. Hiermee kun je selectors gemakkelijk nesten wanneer je BEM opbouw goed is, je kunt variabelen aan maken voor bijvoorbeeld headers en kleuren en je kunt loops maken om bepaalde elementen te stylen.

Voorbeeld

Wat we hieronder doen is eerst de HTML opbouwen in een BEM structuur.

Zie het form tag heeft een class genaamd form, dit is het Block. Daarin nesten we de elementen, in dit geval een form_ _input en een form_ _submit, dit zijn de Elementen. De form_ _submit- -disabled is hier de modifier en geldt als alternatief op de gewone form_ _submit, deze is namelijk disabled, omdat ik niet wil dat een gebruiker dit kan aanklikken.

<form class="form">

  <input class="form__input" type="text" />

  <input class="form__submit form__submit--disabled" type="submit" />

</form>

De semantiek van BEM is als volgt;

Block

Block_ _element

Block_ _element- -modifier

Vervolgens kun je met Sass als volgt gaan stylen wat er voor zorgt dat je alleen CSS aanpast in het Block(Atoom) waarin je werkt.

.form{

        &__input{


        }

        &__submit{

                 &--disabled{

                 }
        }
}

Voordelen van het gebruiken van Sass en BEM

• De classes zijn in dit Block uniek, waarmee je conflicten van andere stijlen kan voorkomen.
• Door het gebruik van classes en daarop te stijlen i.p.v. te stylen op HTML tags kun je gemakkelijk HTML aanpassen zonder dat de CSS aangetast wordt.
• Het gebruik van BEM zorgt ervoor dat je consistent werkt.
• Het is gemakkelijk om een block over te zetten naar een ander project, dat is het voordeel van het opbouwen van atomen.

Met deze methode kun je gemakkelijk modulair, correct en goed te onderhouden front-end code schrijven. Er zijn minder problemen als het gaat om specifieke styling en het grootste voordeel is dat het gemakkelijk is her te gebruiken. Waarom zou je het wiel opnieuw uitvinden?

Nog een mooie toevoeging is natuurlijk om deze atomen op een centrale plek te zetten zoals http://demo.patternlab.io, net als de visuele documentatie van atomen die ik beschrijven in mijn eerste blog over atomic design.