BEM: navngiving av blokk, element og modifikator
Bruk Block-Element-Modifier-metodikken til å opprette forutsigbare og gjenbrukbare klassenavn.
BEM: navngiving av blokk, element og modifikator er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er BEM?
BEM (Block–Element–Modifier) er en navnekonvensjon som skaper selvforklarende klassenavn. Den gjør CSS-komponenter forutsigbare og selvforklarende.
Blokk
En blokk er en selvstendig og meningsfull UI-komponent som kan eksistere uavhengig. Den er komponentens rotklasse.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Element
Et element er et underordnet element i en blokk som ikke har noen betydning utenfor den. Elementer bruker dobbelt understrek: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modifikator
En modifikator er en variant eller tilstand for en blokk eller et element. Modifikatorer bruker dobbelt bindestrek: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Fullstendig BEM-eksempel
En kortkomponent med BEM-navngivning:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>BEM CSS-struktur
Tilhørende CSS for BEM-kortet:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Fordelen med BEM-spesifisitet
BEM-klasser er alle enkeltklasser (spesifisitet 0,1,0). Ingen selektor er mer spesifikk enn en annen, så overstyring er rett frem – det er bare å legge til riktig modifikatorklasse.
Vanlige BEM-feil
Unngå disse BEM-fallgruvene:
- Elementer på flere nivåer:
.card__body__title– flat ut til.card__title - Elementer som ligger utenfor blokken sin i HTML
- Bruk av elementselektorer som
.nav__link a– gir unødvendig spesifisitet
BEM med egendefinerte CSS-egenskaper
BEM og CSS-variabler passer naturlig sammen. Definer tokens på blokknivå som modifikatorer kan overstyre:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Når BEM ikke bør brukes
BEM er omstendelig og ikke ideelt for utility-klasser eller enkeltstående stiler. Utility-first-rammeverk som Tailwind erstatter BEM fullstendig. Bruk BEM for egendefinerte komponentbiblioteker der semantisk navngivning er viktig.
BEM i praksis
Mange designsystemer bruker BEM-varianter eller lignende navnesystemer. Den konkrete syntaksen er mindre viktig enn det konsekvente prinsippet: blokk → element → modifikator, uten dyp nøsting og med flat spesifisitet.
Rask kontroll
I BEM, hvilken syntaks representerer et element med navnet "title" inni en blokk med navnet "card"?
Oppsummering
BEM bruker navngivning med Block, Element og Modifier: .block__element--modifier. Alle klasser er enkeltklasser for flat og lik spesifisitet. Elementer (__) hører til inne i blokken sin. Modifikatorer (--) oppretter varianter. Unngå dyp nøsting som .card__body__title – flat ut til .card__title.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «BEM: navngiving av blokk, element og modifikator» gratis?
Ja – hele teksten i «BEM: navngiving av blokk, element og modifikator» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «BEM: navngiving av blokk, element og modifikator»?
Bruk Block-Element-Modifier-metodikken til å opprette forutsigbare og gjenbrukbare klassenavn. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «BEM: navngiving av blokk, element og modifikator»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Hvorfor CSS-arkitektur er viktig
- BEM: navngiving av blokk, element og modifikator
- Filorganisering: ITCSS- og 7-1-mønsteret
- Unngå spesifisitetskriger