En hurtig introduktion til Block Element Modifiers (BEM)

Blokelementmodifikator

Hej! Så du ønsker at få en bedre forståelse af BEM? Jeg gætter på, at hvis du læser dette, ved du måske ikke, hvad BEM står for. Hvis du ikke gør det, er det en forkortelse for Block Element og Modifier.

Hvad er BEM?

BEM er en designmetodik, der hjælper dig med at oprette genanvendelige komponenter og kodedeling i front-end-udvikling. - getbem.com

Dette betyder, at BEM er et system med metoder, der hjælper dig med at skrive din HTML og CSS-kode, så det er enkelt at genbruge og dele med andre dele af din kode.

BEM i aktion.

Så nu ved du definitionen af ​​BEM, men du ved muligvis ikke, hvordan den ser ud, eller hvordan den fungerer. Som jeg sagde tidligere, er BEM en forkortelse, så lad os se på hvert af disse ord, og hvad de betyder.

Blok

En "blok" henviser til enhver enhed, der kan stå alene og stadig give mening. Eksempler på blokke er overskrift, input og afkrydsningsfelt. Eksempler på ting, der ikke er blokke, er overskriftstitler, et element på en liste eller en etiket til et afkrydsningsfelt.

Hvis vi skulle fjerne teksten, der mærker en radioindgang og sætte den på egen hånd, vil det ikke længere give mening.

Se det her:

Hvis den skitserede del opdeles i individuelle blokke, ville de ikke længere give mening for brugeren.

Dette er en sand opdeling i blokke:

Hvis jeg fjernede en af ​​disse blokke og kastede den væk, vil den anden blok stadig give mening for brugeren. Skønt det i dette tilfælde ikke er nyttigt for brugeren, fordi det er en alternativknap i stedet for et afkrydsningsfelt.

Det er vigtigt at se på en blok som enhver kombination (eller et enkelt HTML-tag) af flere elementer (eller andre blokke) på en måde, det giver mening for brugeren, når den placeres alene.

elementer

Et element skulle være lidt lettere at forstå nu, da jeg forklarede det, da jeg talte om blokke. De dele af en blok, der ikke har semantisk betydning uden for blokken, er elementer.

Lad os se på dette igen:

De fremhævede dele er elementer, fordi de er med til at definere, hvad blokken er.

Koden til skærmbillede ovenfor ville se sådan ud:

Vi har tre elementer, der udgør indstillingsblokken: option__text, option__radio-knap, option__note. Alligevel kunne vi ændre et af disse elementer til en blok for sig selv:

Elementindstillingen__not er nu en bloknot. Det betyder, at vi kunne finde note uden for mulighedsblokken på en måde, der er nyttig for brugeren.

modifier

En modifikator er et flag, der ændrer, hvordan en blok eller et element ser ud eller opfører sig. For eksempel:

De to knapper er den samme blok, men de ser forskellige ud. Kraften, som BEM giver os, lader os bruge den samme blok to gange og stadig have dem til at se meget forskellige ud.

Lad os se, hvordan koden til det ser ud:

Som standard er knappen hvid med en blå tekst. For at få en variation tilføjer vi en knap - grønt flag, som derefter gør knappen grøn med en hvid tekst.

I henhold til BEM-regler har vores flag-knap - grøn en "bivirkning", der kan føre til forvirring, som er egenskaben til boksskygge. Vores flag gør noget, som dets navn ikke fortæller os om. Men det er okay, fordi vi i vores lille projekt aldrig har en grøn knap med en boksskygge. Hvis vi nogensinde gør det, kan vi bryde op flaget:

Når vi har brug for en grøn knap med en boksskygge, tilføjer vi kun knappen - grønt flag. Den samme ting gælder farveegenskaben.

Konklusion

BEM er en meget flot måde at skrive og strukturere din HTML- og CSS-kode. Denne vejledning dækker ikke 100% af alt BEM, men det skal være nok til at give dig en solid forståelse af metodikken. Du kan læse mere om BEM her.

Jeg håber, at du lærte noget af dette, og at du har en bedre forståelse af BEM, og hvordan det ser ud i den virkelige verden. Hvis du gør det, tøv ikke med at give en kommentar og et par klapper.

Har du spørgsmål? Du kan sende mig en DM på twitter @THEozmic.