Promote a BEM element when it has a coherent purpose and can own its implementation outside the parent block. Use the local Mac exercise below to test that boundary before renaming classes or moving CSS.

What makes an element independent?

For someone maintaining an authored HTML page, the practical question is whether a growing section should remain part of its parent or become a separately maintained block. BEM defines a block as a logically and functionally independent component; an element belongs to a block and cannot be used independently of it. Blocks may contain other blocks. Key concepts

Consider a synthetic page containing a workbench block. Its workbench__preview contains an abstract shape, a label and a caption. Initially, all three serve only the workbench. Later, the same preview is needed in a narrow shelf region. That second placement gives you a concrete extraction task: determine whether the preview can become a shape-tile block with its own appearance and internal structure.

Depth alone does not decide this. BEM permits nested elements in the DOM while keeping their names flat: workbench__preview, workbench__label and workbench__caption. A name such as workbench__preview__caption incorrectly expresses an element belonging to another element. The official quick start also recognizes a service block as an option when a complex element needs independently organized internal parts. Quick Start

A useful distinction is between moving markup into a separate template for readability and establishing a new BEM block. You can make the first change without immediately committing to the second. Make the block boundary explicit when you can describe what the extracted part owns, what its host supplies and how another placement will use it.

Use a dependency test before extracting

The following decision aid is an editorial method derived from BEM’s independence principle. It is not an official scoring system. Apply it to one candidate subtree, rather than evaluating the entire page at once.

Question Evidence supporting extraction Reason to keep the element
Does it have a clear purpose? “Displays a shape with a label and caption” Its purpose is only “the workbench’s inner wrapper”
Can it own its internal presentation? Its border, spacing and typography travel together Those rules are inseparable from the parent’s structure
Can the host supply placement separately? The host controls available space and surrounding gaps The candidate requires a particular ancestor layout
Do its variations describe itself? A compact tile is meaningful in several placements Every variation is named after a particular parent
Would separate maintenance help now? A second placement or a substantial internal responsibility exists Extraction would add an interface with no present use

Write one sentence before changing code: “The shape-tile owns its shape, label, caption and internal spacing; the host owns placement and available width.” If that sentence keeps expanding to include the workbench’s column arrangement or sibling ordering, reconsider where the boundary belongs.

Separate external layout from internal appearance. BEM’s CSS guidance assigns external geometry and positioning through the parent, and demonstrates combining an independent block class with a parent element class on the same node. This combination is called a mix. CSS methodology

For example, class="shape-tile workbench__preview" can express both identities. Let shape-tile define its border and internal layout, and let workbench__preview define its placement. Avoid assigning the same property through both identities unless the override is an intentional part of the contract.

Build a local comparison on your Mac

Create a new folder for this exercise so that you can compare the extracted design without altering an existing page. You need a plain-text editor and a desktop browser; the example requires no package installation, JavaScript, downloaded fonts or image files.

In TextEdit, choose File > New, then Format > Make Plain Text. Paste the HTML below and save it as index.html, choosing Use .html if prompted. Apple documents these steps and also explains how to reopen HTML as source using Ignore rich text commands. Work with HTML documents in TextEdit on Mac

Create the complete HTML document

This document places the same proposed component in two hosts. All labels are synthetic, and the abstract shape is drawn with CSS. Save the following as 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>

Add the complete stylesheet

Create another plain-text file named styles.css in the same folder. Ensure its actual filename is styles.css, rather than styles.css.txt. Paste this entire stylesheet:

/* 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; }

Open index.html in Safari or another desktop browser. The intended comparison is a wider workbench and a narrower shelf. Their tiles share component styling; the available space determines whether the shape and text fit beside each other or wrap.

The resource contract matters here: rel="stylesheet" establishes an external stylesheet resource, and href="styles.css" identifies the file this document needs. Adding a BEM class does not establish that resource link. Keep both files together when moving the exercise. The HTML Standard defines this stylesheet relationship. HTML Standard: Link type “stylesheet”

How do you tell whether the extraction worked?

Use the comparison as a diagnostic exercise. The expected outcomes below follow from the supplied code; they are checks for you to perform in your browser, not reported browser test results.

  1. Check the baseline. Both tiles should have a white background, a blue rounded shape, a label and a caption. If everything appears unstyled, check the stylesheet filename and link before assessing the component boundary.
  2. Remove one placement class. Delete workbench__preview from the first tile, save and reload. Its top margin should change while its internal appearance remains intact.
  3. Remove one host class. Temporarily remove workbench from the containing section. Its host frame and fixed width should disappear; the tile should retain its component styles.
  4. Change the shared component. Change the border radius in .shape-tile. Both instances should change without editing either host selector.
  5. Stress the content. Replace one caption with a longer synthetic sentence and narrow the browser window. Check wrapping and whether all text remains visible.

Interpret failures by responsibility. A missing border after removing the host class means that a component style may still belong to the host selector. Unexpected surrounding spacing points toward placement rules. Text differences may reveal inherited styles or global selectors. Fix the responsible dependency before adding another override.

BEM naming does not create browser-enforced style isolation. CSS inheritance continues through the document tree: inherited properties take values from the parent when the cascade supplies no value for the element. This is defined in the CSS Cascading and Inheritance specification and illustrated by MDN. CSS Cascading and Inheritance Module Level 5, section 7.2, Inheritance

The example deliberately sets the tile’s font and text color at its root. In a real page, inheriting site typography may be desirable instead. Record that as a dependency. Independence means the required environment is understandable and portable; it need not mean reproducing every browser default inside every component.

When should you keep the element instead?

Keep the candidate as an element when its meaning and implementation remain specific to the parent. A workbench-only alignment wrapper can have many descendants without needing a separate public identity. Flatten its BEM names and improve its organization before introducing a new block.

Conversely, a component used only once can still deserve extraction when its internal responsibility is substantial and its dependency boundary is clear. Treat reuse as supporting evidence, not a required count. In this exercise, the second placement makes the boundary easier to inspect; it does not establish a universal two-use rule.

Also reconsider an extraction that accumulates host-specific variations. Names such as shape-tile--inside-workbench suggest that placement is becoming part of the component interface. First ask whether the difference belongs in workbench__preview. Reserve a component variation for a difference you can explain in the component’s own terms.

Does modern CSS scoping change the decision?

The @scope rule can restrict where enclosed selectors match, which can help manage selectors within a document subtree. MDN currently marks it Baseline 2026, available across current browser versions since March 2026, while noting that older devices or browsers may lack support. Do not assume that every Mac installation supports it. @scope CSS at-rule

The supplied exercise uses ordinary class selectors and does not require @scope. Keep essential component styling in those rules when supporting browsers without scoping. Scoping can improve how you express a boundary, but the ownership decision still requires a clear account of the component’s purpose, dependencies and placement.

Extract the complex element when you can move its purpose and internal implementation together, leave surrounding layout with the host, and demonstrate the result in another context. If those responsibilities remain tangled, keep the element while you clarify them; a shorter class name alone will not finish the refactor.

Sources