--- title: Hva er BEM? Fordeler og grunner til å bruke det - elpassion.com description: BEM holder verden av CSS trygg fra rot og kaos. Finn mer informasjon om hva det er og oppdag grunnene til at det er verdt å bruke det! image: https://www.elpassion.com/hubfs/BLOG%20IMAGES/cover_photo%20%281%29.png --- [Back to blog ](https://www.elpassion.com/blog?hsLang=no) 11 mars 2025 (updated: 11 mars 2025) # 5 grunner til å bruke BEM-notasjon (a.k.a. hvorfor er BEM G.R.E.A.T.) [![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/joanna_erd_author.jpg) ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/joanna_erd_author.jpg) ](https://www.elpassion.com/no/blog/author/joanna-erd) [ by Joanna Erd ](https://www.elpassion.com/no/blog/author/joanna-erd) - [ Development ](https://www.elpassion.com/no/blog/tag/development) Chapters ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/cover_photo%20%281%29.png) ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/cover_photo%20%281%29.png) Show contents Hide contents BEM er en slags superhelt — den holder CSS-verdenen trygg fra rot og uorden. Jeg vil gjerne dele hva det er og hvorfor det har vært min metode siden jeg lærte det. CSS er relativt enkelt å få til å fungere. Men å holde det fungerende og rent på lang sikt er en helt annen historie — rot sniker seg inn, og før du vet ordet av det, drømmer du om å starte helt fra bunnen av. Høres kjent ut? Kanskje det er på tide med en navnekonvensjon. Ulike metoder for ulike folk — det finnes forskjellige alternativer, hvor mitt valg er **BEM**. ## Hva er BEM? BEM er en navngivningskonvensjon for klasser, som gjør det mulig å skrive stiler på en modulær og vedlikeholdbar måte. Forkortelsen står for Block‑Element‑Modifier, som er de eneste* tre delene et CSS-klassenavn kan bestå av i BEM-metodologien. Notasjonen går slik: ‘block__element — modifier’: Navnet på klassen begynner alltid med blokknavnet, deretter kommer elementnavnet (valgfritt, prefikset med to understreker), og til slutt modifikatoren (også valgfritt, prefikset med to bindestreker). Den doble understreken brukes for å skille elementnavn fra andre deler av klassenavnet. Dette navngivningssystemet bidrar til å gjøre markupen mer beskrivende og eksplisitt kun gjennom navngivning. ![bem css](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/1-1.png?width=1195&name=1-1.png)Fig. 1: Eksempel på en komponent navngitt i BEM ### Blokk **En blokk er en selvstendig, gjenbrukbar gruppe av elementer** — du kan tenke på det som en komponent i frontend-rammeverk. En blokk representerer strukturelle biter av kode på en nettside, som header, innhold, sidebar, footer og søk. For eksempel ville en ‘kort’ være en god blokk. Merk: unngå innholdsspesifikke navn (som ‘handleliste’) til fordel for mer generiske navn (som ‘sjekkliste’), slik at du kan gjenbruke dem i forskjellige sammenhenger (‘sjekkliste’ ville fungere fint for både handlelister og oppgavelister). ### Element **Element er et barnelement som kun eksisterer inne i blokken sin.** Eksempler kan være ‘card__title’, ‘card__text’ eller ‘card__button’. Merk: det kan bare være ett nivå av barnelement-nesting, så ‘card__button__text’ er ikke tillatt. Du bør heller definere en annen blokk kalt ‘button’ (som består av ‘button__text’). ### Modifier **Modifier gjør det mulig å gi ekstra varianter for enten blokk eller element.** På denne måten kan vi ha klasser som ‘card — featured’ eller ‘card__button — primary’. Merk: modifier-klassen skal kun bære modifikasjonene og alltid være ledsaget av basis klasse. For card ville det være: ‘card card — featured’, hvor basis klassen definerer padding og kant, mens modifier-klassen endrer bakgrunnsfarge. ![reasons to use bem](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/2-1.png?width=1100&name=2-1.png)Fig. 2: Modifier i aksjon * Bortsett fra de tre kjerne BEM-delene, kan du også legge til [namespace](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/) prefiks. Ytterligere lesning er tilgjengelig [her](http://getbem.com/naming/) og [her](https://en.bem.info/methodology/naming-convention/). Også noen nyttige [dos and don’ts](https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/). ## Hvorfor BEM-navnekonvensjonen er G.R.E.A.T.? ### 1. G for Global **BEM er en av de mest anerkjente navngivningskonvensjonene der ute**. Så hvis du introduserer et nytt teammedlem til BEM-prosjektet ditt, er det stor sjanse for at de allerede kjenner konvensjonen, noe som reduserer innledende friksjon og lar dem være produktive fra dag 1. ### 2. R for Lesbare CSS-klasser Takket være beskrivende CSS-klassennavn gitt til stort sett hvert element, er stilarket enkelt å lese på egen hånd. BEM (Block-Element-Modifier) navnekonvensjonen forbedrer lesbarheten ved å dele en webside opp i mindre, gjenbrukbare kodeblokker. Ikke bare ser velgerne bedre ut, de fungerer også raskere enn [dypt nestede](https://css-tricks.com/efficiently-rendering-css/#article-header-id-3). ![hva bem er](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/3-1.png?width=1100&name=3-1.png)Fig. 3: Lesbarhet av BEM vs tag-selektorer ### 3. E for Expandable Siden spesifisiteten til CSS-selektorer er minimal, er det veldig enkelt å legge til en annen variasjon. En enkelt modifikatorklasse bør være nok — ikke mer [enn](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#specificity-basic-principles)[ minst lik selektorvekt](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#specificity-basic-principles)’ strev. ![bem advantages](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/4-1.png?width=1100&name=4-1.png)Fig. 4: Overstyring av stil for sekundært menyeikon (BEM vs. nestede tagger) ### 4. A for Adaptable **Å dele filosofien om modularitet, fungerer BEM naturlig godt med rammeverk.** Også, styling er uavhengig av elementtype og nesting, noe som gjør det mindre utsatt for brudd når man håndterer dokumentstruktur. ![what is bem](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/5-1.png?width=1100&name=5-1.png)Fig. 5: Viktigheten av elementtype og nesting (BEM vs. tags) ### 5. T for Tough Det er bare to harde ting innen datavitenskap: cache invalidation og navngivning av ting. — Phil Karlton Når du begynner å følge BEM (fullstendig og ærlig), vil du sannsynligvis oppleve å slite med det konstant. Paradoxalt nok er det en god ting: - å finne riktige blokknavn gjør koden ren og lesbar for andre (inkludert ditt fremtidige jeg) - å kjempe med synonymer oppmuntrer til gjenbruk av eksisterende blokker - å unngå fler-nivå nesting får deg til å tenke over dokumentstrukturen Kort sagt, det vil få deg til å presse deg selv til å være oppmerksom på detaljer, tenke ting gjennom, og dermed heve kvaliteten på koden din. Klar til å begynne? ### Sjekk også ut: - [Styled-Components Nitty Gritty](https://www.elpassion.com/blog/styled-components-nitty-gritty?hsLang=no) - Lær alternative måter å style React-applikasjoner i JS. - [Hvordan Fungerer Tailwind?](https://www.elpassion.com/blog/tailwind-css-how-does-it-work?hsLang=no) - Tailwind blir en av de mest populære CSS-rammeverkene. La oss lære hva all oppstyret handler om. [Share on Twitter ](http://twitter.com/share?url=https://www.elpassion.com/no/blog/5-reasons-to-use-bem-a) [Share on LinkedIn ](https://www.linkedin.com/shareArticle?mini=true&url=https://www.elpassion.com/no/blog/5-reasons-to-use-bem-a) [Share on Facebook ](http://www.facebook.com/sharer.php?u=https://www.elpassion.com/no/blog/5-reasons-to-use-bem-a) [![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/joanna_erd_author.jpg) ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/joanna_erd_author.jpg) ](https://www.elpassion.com/no/blog/author/joanna-erd) [ Joanna Erd ](https://www.elpassion.com/no/blog/author/joanna-erd) Senior Frontend Developer ## Du kan også like dette [![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ](https://www.elpassion.com/no/blog/natural-language-processing?hsLang=no) - AI ### [Lås opp kraften i ord: Hvordan NLP-funksjoner endrer måten vi forstår språk på](https://www.elpassion.com/no/blog/natural-language-processing?hsLang=no) 23 juni 2025 • Ula Kowalska [![](https://www.elpassion.com/hubfs/125d6de5-3db6-43db-ab6e-eab671ba037f.png) ![](https://www.elpassion.com/hubfs/125d6de5-3db6-43db-ab6e-eab671ba037f.png) ](https://www.elpassion.com/no/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=no) - [ Development ](https://www.elpassion.com/no/blog/tag/development) - [ Business ](https://www.elpassion.com/no/blog/tag/business) ### [Skrive om eller refaktorere? En balansert guide til legacy-systemer](https://www.elpassion.com/no/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=no) 14 april 2025 • Ula Kowalska [![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/migrating-wordpress-to-webflow.png) ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/migrating-wordpress-to-webflow.png) ](https://www.elpassion.com/no/blog/switch-from-wordpress-to-webflow?hsLang=no) - [ Business ](https://www.elpassion.com/no/blog/tag/business) ### [Hvorfor WordPress-dramaet gjør overgangen til Webflow til et smart valg](https://www.elpassion.com/no/blog/switch-from-wordpress-to-webflow?hsLang=no) 11 mars 2025 • Maria Pradiuszyk Kanskje dette er starten på en vakker venskap? ## Vi er tilgjengelig for nye prosjekter. [![Contact us](https://no-cache.hubspot.com/cta/default/4937048/d8fa95f1-46dc-4ecf-b1a6-aa709c23404b.png)](https://cta-redirect.hubspot.com/cta/redirect/4937048/d8fa95f1-46dc-4ecf-b1a6-aa709c23404b) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "Poland", "addressLocality" : "Warsaw", "addressRegion" : "Mazowieckie", "postalCode" : "", "streetAddress" : "Grzybowska 62 " }, "email" : "projects@elpassion.com", "foundingDate" : "2011", "foundingLocation" : "Warsaw, Poland", "logo" : "https://www.elpassion.com/hubfs/elp_mnt_black.svg", "mainEntityOfPage" : { "@id" : "https://www.elpassion.com/no/blog/5-reasons-to-use-bem-a", "@type" : "WebPage", "description" : "BEM holder verden av CSS trygg fra rot og kaos. Finn mer informasjon om hva det er og oppdag grunnene til at det er verdt å bruke det!" }, "member" : { "@type" : "Person", "jobTitle" : "CEO", "name" : "Anna Elwart", "nationality" : "Poland", "url" : "https://www.linkedin.com/in/annaelwart/" }, "name" : "El Passion", "numberOfEmployees" : "60", "sameAs" : [ "https://twitter.com/elpassion", "https://www.facebook.com/elpassion/", "https://www.linkedin.com/company/el-passion", "https://github.com/elpassion", "https://www.behance.net/elpassion", "https://dribbble.com/elpassion" ], "url" : "https://www.elpassion.com", "vatId" : "PL5213644497" } ``` ```json { "@context" : "http://schema.org", "@type" : "WebSite", "url" : "https://www.elpassion.com/" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : [ { "@type" : "Person", "name" : "Joanna Erd", "url" : "https://www.elpassion.com/no/blog/author/joanna-erd" }, { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : "150", "url" : "https://26048673.fs1.hubspotusercontent-eu1.net/hubfs/26048673/EL-Passion-Logo-400x150.svg", "width" : "400" }, "name" : "EL Passion", "url" : "https://www.elpassion.com" } ], "dateModified" : "2025-03-11", "datePublished" : "2025-03-11", "headline" : "Hva er BEM? Fordeler og grunner til å bruke det - elpassion.com", "image" : "https://www.elpassion.com/hubfs/BLOG%20IMAGES/cover_photo%20%281%29.png", "inLanguage" : "en", "mainEntityOfPage" : { "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : "150", "url" : "https://26048673.fs1.hubspotusercontent-eu1.net/hubfs/26048673/EL-Passion-Logo-400x150.svg", "width" : "400" }, "name" : "EL Passion", "url" : "https://www.elpassion.com" }, "url" : "https://www.elpassion.com/no/blog/5-reasons-to-use-bem-a" } ```