BEM-metodiken: Block Element Modifier
Namnge CSS-klasser enligt mönstret Block__Element--Modifier för att skapa självbeskrivande, återanvändbara komponentstilar med låg specificitet.
BEM-metodiken: Block Element Modifier är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är BEM?
BEM (Block, Element, Modifier) är en namngivningskonvention för CSS som gör stilar förutsägbara, återanvändbara och fria från konflikter. Genom att koda komponentstrukturen i klassnamn eliminerar den specificitetskrig och oavsiktliga stilkrockar.
Block – fristående komponenter
Ett Block är en fristående, återanvändbar komponent: card, button, nav. Klassnamnet är blocknamnet, skrivet med gemener och bindestreck.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Element – delar av ett Block
Ett Element är en del av ett Block som saknar egen betydelse. Använd dubbla understreck: 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>Modifierare – varianter och tillstånd
En modifierare ändrar utseendet eller beteendet hos ett Block eller Element. Använd dubbla bindestreck: 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 för CSS
BEM-klasser har låg och likvärdig specificitet (en klass vardera). Det gör stilar enkla att åsidosätta. Använd aldrig ID:n eller nästlade elementselektorer – de ökar specificiteten på ett oförutsägbart sätt.
/* 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 &-selektorn för överordnat element gör det mindre omständligt att skriva BEM. Den kompilerade CSS-koden är identisk med vanlig 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);
}
}När ska ett nytt Block skapas?
Skapa ett nytt Block när komponenten kan fungera fristående och återanvändas i olika sammanhang. Skapa ett Element när delen bara är meningsfull inuti ett specifikt Block.
BEM undviker nästling
BEM motverkar djup nästling i HTML och CSS. Ett element inuti ett annat element är fortfarande block__element, inte 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 och JavaScript
Använd en separat JS-specifik klass som hook för beteende: prefixet js-. Det frikopplar styling och skript – om ett BEM-klassnamn byts ut påverkas inte JavaScript-beteendet.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Blanda BEM-block
Ett element kan ha flera blockklasser för kontextspecifik styling utan att blocken kopplas ihop.
<button class="btn btn--primary form__submit">Submit</button>BEM:s begränsningar
Klassnamnen kan bli långa. BEM fungerar bäst för stora team och designsystem där global stilkonsekvens är viktig. För komponentramverk (React/Vue) med omfångsbegränsade stilar är BEM:s fördelar med namnområden mindre avgörande.
Snabbkontroll
Vad representerar card__title--truncated i BEM?
Sammanfattning: BEM
Block: fristående komponent. Element (dubbla understreck __): del av ett block. Modifierare (dubbla bindestreck --): variant eller tillstånd. Låg och likvärdig specificitet. Undvik ID-selektorer och djup nästling. Använd prefixet js- för JavaScript-hooks. Sass & gör BEM mindre omständligt. Utmärkt för stora team och designsystem.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”BEM-metodiken: Block Element Modifier” gratis?
Ja – hela texten till ”BEM-metodiken: Block Element Modifier” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”BEM-metodiken: Block Element Modifier”?
Namnge CSS-klasser enligt mönstret Block__Element--Modifier för att skapa självbeskrivande, återanvändbara komponentstilar med låg specificitet. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”BEM-metodiken: Block Element Modifier”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- BEM-metodiken: Block Element Modifier
- CSS Modules: begränsade klassnamn
- CSS-in-JS: Styled-components och Emotion
- Tailwind CSS: utility-first-metoden