En hurtig introduktion til Block Element Modifiers (BEM)

Hej! Så du ønsker at få en bedre forståelse af BEM? Jeg antager, at hvis du læser dette, ved du muligvis ikke, hvad BEM står for. Hvis du ikke gør det, det er en forkortelse for B- lås E lement og M odifier.

Hvad er BEM?

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

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

BEM i aktion.

Så nu kender du definitionen af ​​BEM, men du ved muligvis ikke, hvordan det ser ud, eller hvordan det 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 header, inputog checkbox. Eksempler på ting, der ikke er blokke, er overskriftstitler, et element på en liste eller en etiket til et afkrydsningsfelt.

Hvis vi fjerner teksten, der mærker en radioindgang, og lægger den alene, giver det ikke længere mening.

Se det her:

Hvis den del, der er skitseret, bliver adskilt i individuelle blokke, giver de ikke længere mening for brugeren.

Dette er en ægte adskillelse i blokke:

Hvis jeg fjernede en af ​​disse blokke og smed den væk, vil den anden blok stadig give mening for brugeren. Selv om det i dette tilfælde ikke vil være nyttigt for brugeren, fordi det er en radioknap 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, som det giver mening for brugeren, når den placeres alene.

Elementer

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

Lad os se på dette igen:

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

Koden til skærmbilledet ovenfor ser sådan ud:

Vi har tre elementer, der udgør den optionblok: option__text, option__radio-button, option__note. Alligevel kunne vi ændre et af disse elementer til en egen blok:

Elementet option__noteer nu en blok note. Det betyder, at vi kunne finde noteuden for optionblokken på en måde, der er nyttig for brugeren.

Modifikator

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 anderledes ud. Kraften, som BEM giver os, lader os bruge den samme blok to gange og stadig have dem til at se meget anderledes ud.

Lad os se, hvordan koden for det ser ud:

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

I henhold til BEM-regler har vores flag button--greenen “bivirkning”, der kan føre til forvirring, som er box-shadowejendommen. Vores flag gør noget, som navnet ikke fortæller os om. Men det er okay, for i vores lille projekt har vi aldrig en grøn knap med en box-shadow. Hvis vi nogensinde gør det, kan vi bryde flaget op:

Nu, når vi har brug for en grøn knap med en bokseskygge, tilføjer vi kun button--greenflagget. Det samme gælder for colorejendommen.

Konklusion

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

Jeg håber, du har lært 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 efterlade en kommentar og et par klapper.

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