Artikel

BEM och Atomic Design: En kraftfull kombination

Två metoder som har blivit populära val bland frontend-utvecklare är BEM och Atomic Design. När de implementeras korrekt, kan de markant förbättra skalbarhet, läsbarhet och återanvändbarhet i koden, vilket i slutändan leder till mer effektiva frontend-lösningar. Låt oss undersöka fördelarna med att implementera BEM och Atomic Design i din frontend-utvecklingsprocess.

Erik Lundow

Frontend Developer

Vad är BEM?

BEM, som står för Block, Element, Modifier, är en metodik för frontend-utveckling som underlättar skapandet av återanvändbara komponenter och CSS-klasser. Den erbjuder en strukturerad namngivningskonvention ämnad till att förtydliga relationer mellan olika delar av koden.

Block

En fristående enhet med ett eget specifikt syfte, som en header, container eller knapp.

Element

Delar av ett block, de har inget fristående syfte och är semantiskt kopplade till sitt block.
T.ex en knapptext, rubrik eller titel.

Modifier

Flaggor på block eller element som ändrar deras utseende eller beteende, såsom färg eller storlek.

BEM Image — Källa: https://medium.com/akosweb/learn-the-css-bem-naming-convention-with-oreos-2c265e5240fe

Fördelar med att Implementera BEM

Skalbarhet och återanvändbarhet

BEM-metodiken uppmuntrar till återanvändning av komponenter i hela projektet, vilket leder till ett mer enhetligt gränssnitt och minskar den skrivna koden. Denna återanvändbarhet förbättrar också projektets skalbarhet, vilket möjliggör en mer effektiv tillväxt och underhåll.

Förbättrad kodläsbarhet

BEM:s namngivningskonvention gör koden självförklarande, vilket hjälper utvecklare att förstå relationer inom kodbasen och de roller klasser har vid första anblicken.

Färre problem med överlappning

CSS utvecklat med BEM-metodik hjälper till att minska problemen med överlappande stilmallar i och med dess betoning på att skapa fristående block som är isolerade samt mindre beroende av DOM-strukturen.

Vad är Atomic Design?

Atomic Design, skapat av Brad Frost, är en metodik för att utforma design system. Den bygger på tanken att ett webbgränssnitt kan brytas ner till grundläggande beståndsdelar, så som kemiska system kan brytas ner i atomer. Atomic Design har fem steg: atomer, molekyler, organismer, mallar och sidor, var och en byggd på den föregående.

Fördelar med att implementera Atomic Design

Förbättrad Design Consistency

Genom att utgå från de minsta elementen och expandera till större strukturer, säkerställer Atomic design en enhetlig design. Det hjälper till att skapa ett sammanhängande visuellt och funktionellt narrativ genom hela applikationen.

Effektivt workflow

Med Atomic Design kan team arbeta på olika delar av gränssnittet samtidigt utan konflikter. Medan en gruppmedlem arbetar på atomer kan en annan använda dessa atomer för att skapa molekyler, vilket påskyndar designprocessen.

Uppmuntrar till bättre prototyper och tester

Atomic Design möjliggör snabbare framtagande av mockups (förstadie till prototyp) genom att återanvända atomer, molekyler och organismer. Det uppmuntrar också komponentdriven utveckling och testning, ett måste för modern enhetstestning och integrationstestning.

Kraften i BEM och Atomic Design tillsammans

Kombinationen av BEM och Atomic Design ger en kraftfull strategi för frontend-utveckling. BEM:s metodik förbättrar CSS-kodning och hantering, medan Atomic Design fokuserar på hela designsystemets arkitektur. Tillsammans förbättrar de utvecklarsamarbete, återanvändbarhet och underhållbarhet i frontend-utveckling. Med Atomic Design som ger strukturen och BEM som hjälper till att underhålla kodbasen, är fördelarna betydande.

Här är några:

Tydligare Kodorganisering

Atomic Design erbjuder en tydlig hierarki för komponenter, medan BEM tydligt definierar relationerna mellan dessa komponenter. Detta gör koden mer organiserad och förståelig.

Harmoniskt samarbete mellan designer och utvecklare

Båda metodikerna gör att designers och utvecklare kan tala samma språk, förbättrar kommunikation och samarbete. Designern tänker i termer av atomer, molekyler och organismer, medan utvecklaren kan skapa block, element och modifierare som matchar.

Effektivt Designsystem

När de kombineras, blir BEM och Atomic Design ett effektivt, skalbart och underhållbart designsystem. Principerna för båda metodikerna leder till ett system där komponenter är konsekvent stylade, lätt identifierade och återanvändbara.

Ett praktiskt exempel

Atomic Design

Inom Atomic Design kan en kort komponent vara en organism då den kan bestå av flera molekyler och atomer såsom en rubrik, ett stycke och en knapp.

En generisk knapp kan vara en atom:

html
<button class="a-button">Click Me</button>

En molekyl som innehåller flera instanser av en knapp kan vara "m-card-actions":

html
<div class="m-card-actions">
  <button class="a-button">Learn More</button>
		<button class="a-button">Share This</button>
</div>

Organismen (hela kortet) kan se ut så här:

html
<article class="o-card">
  <header class="o-card__header">
    <h2 class="o-card__title">Card Title</h2>
  </header>
  <div class="o-card__content">
    <p class="o-card__text">This is a description of the card.</p>
  </div>
  <div class="m-card-actions o-card__actions">
			<button class="a-button">Learn More</button>
			<button class="a-button">Share This</button>
  </div>
</article>

BEM

BEM-metodiken syns i namngivningen av klasserna ovan. Här är card blocket, header, content, och actions element av det blocket, och title och text är också element som är inbäddade inom sina respektive överordnade element. Blocken m-card-actions och a-button är molekyler respektive atomer som kan återanvändas i olika komponenter.

Om vi önskar en variation av kortet (t.ex. ett kort med en annan

bakgrundsfärg), använder vi en modifier. Säg att vi har en kortvariant som behöver en mörk bakgrund och vit text. Med BEM kan du lägga till en modifier så här:

html
<article class="o-card o-card--dark">
  <header class="o-card__header">
    <h2 class="o-card__title o-card__title--dark">Card Title</h2>
  </header>
  <div class="o-card__content">
    <p class="o-card__text o-card__text--dark">This is a description of the card.</p>
  </div>
  <div class="m-card-actions o-card__actions">
    <button class="a-button a-button--dark">Learn More</button>
    <button class="a-button a-button--dark">Share This</button>
  </div>
</article>

Här är --dark en modifier som ändrar utseendet på o-card, o-card__title, o-card__text, och a-button blocken. Det här var ett litet exempel på hur BEM och Atomic Design kan arbeta tillsammans, men det är upp till dig som utvecklare att komma fram till en struktur och arkitektur som passar ditt projekt.

Summering

En implementering av BEM och Atomic Design-metodik kan avsevärt förbättra dina frontend-lösningar. Även om det kan ta tid att helt bemästra och anpassa sig till dessa metoder är de ovannämnda fördelarna verkligen värda investeringen. Som med alla metoder ligger nyckeln i att förstå ditt projekts krav och använda de rätta strategierna för att effektivt möta dem.

Erik Lundow
Frontend Developer
erik.lundow@pentia.se