Gör ett BEM-element till en komponent när det har ett tydligt syfte och kan äga sin implementation utanför föräldrablocket. Använd den lokala Mac-övningen nedan för att testa den gränsen innan du byter namn på klasser eller flyttar CSS.

Vad gör ett element självständigt?

För den som underhåller en handskriven HTML-sida är den praktiska frågan om en växande sektion ska förbli en del av sin förälder eller bli ett separat underhållet block. BEM definierar ett block som en logiskt och funktionellt självständig komponent; ett element tillhör ett block och kan inte användas självständigt från det. Block kan innehålla andra block. Grundläggande begrepp

Tänk dig en syntetisk sida med ett workbench-block. Dess workbench__preview innehåller en abstrakt form, en etikett och en bildtext. Till en början används alla tre bara i arbetsytan. Senare behövs samma förhandsvisning i ett smalt shelf-område. Den andra placeringen ger dig en konkret uppgift: avgör om förhandsvisningen kan bli ett shape-tile-block med eget utseende och egen intern struktur.

Djupet avgör inte saken i sig. BEM tillåter nästlade element i DOM:en samtidigt som namnen hålls platta: workbench__preview, workbench__label och workbench__caption. Ett namn som workbench__preview__caption uttrycker felaktigt att ett element tillhör ett annat element. Den officiella snabbstarten nämner också ett serviceblock som ett alternativ när ett komplext element behöver självständigt organiserade interna delar. Snabbstart

En användbar skillnad är mellan att flytta uppmärkning till en separat mall för läsbarhetens skull och att etablera ett nytt BEM-block. Du kan göra den första ändringen utan att omedelbart binda dig till den andra. Gör blockgränsen tydlig när du kan beskriva vad den extraherade delen äger, vad dess värd tillhandahåller och hur en annan placering kommer att använda den.

Testa beroendena innan du extraherar

Följande beslutsstöd är en redaktionell metod som bygger på BEM:s självständighetsprincip. Det är inget officiellt poängsystem. Tillämpa det på ett enskilt kandidatunderträd i stället för att utvärdera hela sidan på en gång.

Fråga Tecken på att extrahering passar Skäl att behålla elementet
Har det ett tydligt syfte? ”Visar en form med en etikett och bildtext” Syftet är bara ”arbetsytans inre omslag”
Kan det äga sin interna presentation? Kantlinje, mellanrum och typografi hör ihop Reglerna går inte att skilja från förälderns struktur
Kan värden hantera placeringen separat? Värden styr tillgängligt utrymme och omgivande mellanrum Kandidaten kräver en viss förfäderlayout
Beskriver dess varianter det självt? En kompakt ruta är meningsfull på flera platser Varje variant är uppkallad efter en viss förälder
Skulle separat underhåll hjälpa redan nu? Det finns en andra placering eller ett betydande internt ansvar Extrahering skulle skapa ett gränssnitt som saknar aktuell användning

Skriv en mening innan du ändrar koden: ”shape-tile äger sin form, etikett, bildtext och sina interna mellanrum; värden äger placeringen och den tillgängliga bredden.” Om meningen fortsätter att växa och även omfattar arbetsytans kolumnordning eller ordningen mellan syskon, bör du ompröva var gränsen hör hemma.

Skilj yttre layout från internt utseende. BEM:s CSS-vägledning placerar yttre geometri och positionering hos föräldern och visar hur man kombinerar klassen för ett självständigt block med en förälders elementklass på samma nod. Den kombinationen kallas en mix. CSS-metodik

Till exempel kan class="shape-tile workbench__preview" uttrycka båda identiteterna. Låt shape-tile definiera kantlinjen och den interna layouten, och låt workbench__preview definiera placeringen. Undvik att ange samma egenskap genom båda identiteterna, om inte överskrivningen är en avsiktlig del av kontraktet.

Gör en lokal jämförelse på din Mac

Skapa en ny mapp för den här övningen så att du kan jämföra den extraherade utformningen utan att ändra en befintlig sida. Du behöver en vanlig textredigerare och en webbläsare för datorn; exemplet kräver ingen paketinstallation, JavaScript, nedladdade typsnitt eller bildfiler.

I TextEdit väljer du Arkiv > Nytt och sedan Format > Gör till oformaterad text. Klistra in HTML-koden nedan och spara den som index.html. Välj Använd .html om du får frågan. Apple beskriver de här stegen och förklarar också hur du öppnar HTML som källkod med Ignorera formaterade textkommandon. Arbeta med HTML-dokument i TextEdit på Mac

Skapa hela HTML-dokumentet

Dokumentet placerar samma föreslagna komponent i två värdar. Alla etiketter är syntetiska och den abstrakta formen ritas med CSS. Spara följande som index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Lägg till hela formatmallen

Skapa en annan vanlig textfil med namnet styles.css i samma mapp. Kontrollera att det faktiska filnamnet är styles.css, inte styles.css.txt. Klistra in hela formatmallen:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Öppna index.html i Safari eller en annan webbläsare för datorn. Jämförelsen ska visa en bredare arbetsyta och en smalare hylla. Rutorna delar komponentens utformning; det tillgängliga utrymmet avgör om formen och texten får plats bredvid varandra eller radbryts.

Resurskontraktet spelar roll här: rel="stylesheet" upprättar en extern formatmallsresurs och href="styles.css" identifierar filen som dokumentet behöver. Att lägga till en BEM-klass upprättar inte den resurslänken. Ha båda filerna tillsammans när du flyttar övningen. HTML-standarden definierar den här relationen för formatmallar. HTML-standarden: länktypen ”stylesheet”

Hur ser du om extraheringen fungerade?

Använd jämförelsen som en diagnostisk övning. De förväntade resultaten nedan följer av den medföljande koden; de är saker du själv ska kontrollera i webbläsaren, inte rapporterade testresultat från en webbläsare.

  1. Kontrollera grundläget. Båda rutorna ska ha vit bakgrund, en blå rundad form, en etikett och en bildtext. Om allt ser ostylat ut bör du kontrollera formatmallens filnamn och länk innan du bedömer komponentgränsen.
  2. Ta bort en placeringsklass. Ta bort workbench__preview från den första rutan, spara och läs in sidan igen. Dess övre marginal bör ändras medan det interna utseendet förblir intakt.
  3. Ta bort en värdklass. Ta tillfälligt bort workbench från den omslutande sektionen. Värdens ram och fasta bredd bör försvinna, medan rutan behåller komponentens stilar.
  4. Ändra den gemensamma komponenten. Ändra kantlinjens radie i .shape-tile. Båda instanserna bör ändras utan att du redigerar någon av värdselektorerna.
  5. Belasta innehållet. Ersätt en bildtext med en längre syntetisk mening och gör webbläsarfönstret smalare. Kontrollera radbrytningen och att all text fortfarande syns.

Tolka fel utifrån ansvarsfördelningen. Om en kantlinje försvinner när du tar bort värdklassen kan en komponentstil fortfarande ligga i värdselektorn. Oväntade mellanrum runt komponenten tyder på att placeringsreglerna behöver ses över. Skillnader i texten kan avslöja ärvda stilar eller globala selektorer. Åtgärda det ansvariga beroendet innan du lägger till ännu en överskrivning.

BEM-namn skapar inte en stilisolering som webbläsaren upprätthåller. CSS-arv fortsätter genom dokumentträdet: ärvda egenskaper hämtar sina värden från föräldern när kaskaden inte anger något värde för elementet. Detta definieras i specifikationen för CSS-kaskad och arv och illustreras av MDN. CSS Cascading and Inheritance Module Level 5, avsnitt 7.2, Arv

Exemplet anger avsiktligt typsnitt och textfärg vid rotklassen för rutan. På en verklig sida kan det i stället vara önskvärt att ärva webbplatsens typografi. Notera det som ett beroende. Självständighet innebär att den nödvändiga omgivningen är begriplig och portabel; det behöver inte innebära att varje komponent återger alla webbläsarens standardvärden.

När bör du behålla elementet?

Behåll kandidaten som ett element när dess betydelse och implementation fortfarande är specifik för föräldern. Ett justeringsomslag som bara används i en arbetsyta kan ha många underordnade delar utan att behöva en separat offentlig identitet. Platta till dess BEM-namn och förbättra organiseringen innan du inför ett nytt block.

Omvänt kan en komponent som bara används en gång ändå förtjäna att extraheras när dess interna ansvar är omfattande och dess beroendegräns är tydlig. Se återanvändning som stödjande belägg, inte som ett krav på ett visst antal användningar. I den här övningen gör den andra placeringen gränsen lättare att undersöka; den fastställer inte en universell regel om två användningar.

Tänk också om när en extrahering samlar på sig värdspecifika varianter. Namn som shape-tile--inside-workbench antyder att placeringen håller på att bli en del av komponentens gränssnitt. Fråga först om skillnaden hör hemma i workbench__preview. Använd en komponentvariant för en skillnad som du kan beskriva med komponentens egna begrepp.

Ändrar modern CSS-avgränsning beslutet?

Regeln @scope kan begränsa var omslutna selektorer matchar, vilket kan underlätta hanteringen av selektorer i en del av dokumentet. MDN anger för närvarande Baseline 2026 för regeln och att den har varit tillgänglig i aktuella webbläsarversioner sedan mars 2026, samtidigt som äldre enheter och webbläsare kan sakna stöd. Utgå inte från att alla Mac-installationer stöder den. CSS-at-regeln @scope

Övningen använder vanliga klassselektorer och kräver inte @scope. Behåll viktig komponentstyling i de reglerna när du stöder webbläsare utan avgränsning. Avgränsning kan göra det tydligare hur du uttrycker en gräns, men ägarskapsbeslutet kräver fortfarande en tydlig beskrivning av komponentens syfte, beroenden och placering.

Extrahera det komplexa elementet när du kan flytta dess syfte och interna implementation tillsammans, låta värden sköta den omgivande layouten och visa resultatet i ett annat sammanhang. Om ansvarsområdena fortfarande är sammanflätade bör du behålla elementet medan du klargör dem; ett kortare klassnamn räcker inte för att slutföra omstruktureringen.

Källor