Atomic design - technische implementatie header image

Atomic design - technische implementatie

zondag 8 september 2019 ·Leestijd: 3 minuten
contacteer auteur:

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.


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º