Atomic design - technische implementatie

Geschreven door: op zondag 8 september 2019

Leestijd: 3 minuten

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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten