Frontend Academy · Lektion

BEM-metodik: Block Element Modifier

Navngiv CSS-klasser med mønsteret Block__Element--Modifier for at skabe selvforklarende, genanvendelige komponentstyles med lav specificitet.

Lektion 1 af 413 trin

BEM-metodik: Block Element Modifier er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er BEM?

BEM (blok, element, modifikator) er en navngivningskonvention for CSS, der gør stilarter forudsigelige, genanvendelige og fri for konflikter. Ved at indkode komponentstrukturen i klassenavne eliminerer den specificitetskampe og utilsigtede sammenstød mellem stilarter.

Blokke – selvstændige komponenter

En blok er en uafhængig, genanvendelig komponent: card, button, nav. Klassenavnet er blokkens navn, skrevet med små bogstaver og bindestreger.

<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>

Elementer – dele af en blok

Et element er en del af en blok, der ikke har nogen betydning alene. Brug to understregninger: block__element.

<div class="card">
  <img class="card__image" src="..." alt="...">
  <div class="card__body">
    <h2 class="card__title">Title</h2>
    <p class="card__description">...</p>
  </div>
  <footer class="card__footer">
    <a class="card__link" href="...">Read more</a>
  </footer>
</div>

Modifikatorer – varianter og tilstande

En modifikator ændrer udseendet eller adfærden for en blok eller et element. Brug to bindestreger: block--modifier eller block__element--modifier.

<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>

<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>

BEM-regler for CSS

BEM-klasser har lav og ens specificitet (én klasse hver). Det gør stilarter nemme at tilsidesætte. Brug aldrig ID'er eller indlejrede elementvælgere – de øger specificiteten uforudsigeligt.

/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }

/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }

BEM med Sass

Sass' &-vælger til det overordnede element gør det mindre omstændeligt at skrive BEM. Den kompilerede CSS er identisk med almindelig BEM.

.card {
  padding: 16px;

  &__title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  &__body {
    color: var(--color-text-secondary);
  }

  &--featured {
    border: 2px solid var(--color-brand);
  }
}

Hvornår skal du oprette en ny blok?

Opret en ny blok, når komponenten kan stå alene og genbruges i forskellige sammenhænge. Opret et element, når delen kun giver mening inde i én bestemt blok.

BEM undgår indlejring

BEM fraråder dyb indlejring i HTML og CSS. Et element inde i et element er stadig block__element, ikke block__element__subelement.

<!-- Correct: -->
<div class="card">
  <div class="card__meta">
    <time class="card__date">Jan 1</time>
  </div>
</div>

<!-- Wrong: -->
<div class="card">
  <div class="card__meta">
    <time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
  </div>
</div>

BEM og JavaScript

Brug en separat JS-specifik klasse til adfærdskroge: præfikset js-. Det kobler styling og scripting fra hinanden – hvis du omdøber en BEM-klasse, går JavaScript-adfærden ikke i stykker.

<button class="btn btn--primary js-submit">Submit</button>

// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);

Blanding af BEM-blokke

Et element kan have flere blokklasser til kontekstspecifikke stilarter uden at koble blokkene tæt sammen.

<button class="btn btn--primary form__submit">Submit</button>

BEM's begrænsninger

Klassenavne kan blive lange. BEM fungerer bedst for store teams og designsystemer, hvor global konsistens i stilarterne er vigtig. For komponentrammer (React/Vue) med afgrænsede stilarter er BEM's fordel ved navnerum mindre afgørende.

Hurtigt tjek

Hvad repræsenterer card__title--truncated i BEM?

Besvar den i den interaktive lektion

Opsummering: BEM

Blok: selvstændig komponent. Element (to understregninger __): del af en blok. Modifikator (to bindestreger --): variant eller tilstand. Lav og ens specificitet. Undgå ID-vælgere og dyb indlejring. Brug præfikset js- til JavaScript-kroge. Sass & gør BEM mindre omstændeligt. Fremragende til store teams og designsystemer.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “BEM-metodik: Block Element Modifier” gratis?

Ja — hele teksten til “BEM-metodik: Block Element Modifier” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “BEM-metodik: Block Element Modifier”?

Navngiv CSS-klasser med mønsteret Block__Element--Modifier for at skabe selvforklarende, genanvendelige komponentstyles med lav specificitet. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “BEM-metodik: Block Element Modifier”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy