CSS Architecture Block-Element-Modifier (BEM) - SitePoint

BEM (Block-Element-Modifier) is a front-end development methodology, a naming convention, and a set of associated tools. Originating from Yandex, it's designed for efficient development by large teams. This explanation focuses on the core concept and naming system.

BEM promotes viewing websites as collections of reusable component blocks, combinable to build interfaces. A block is a website section (header, footer, sidebar, etc.), as shown in Figure 2.3. Note that "block" here refers to HTML page segments.

Figure 2.3. A homepage might include header, main, and footer blocks.

Blocks can nest. For example, a header block might contain logo, navigation, and search form blocks (Figure 2.4). A footer could contain a sitemap block.

Figure 2.4. A header block encompassing logo, navigation, and search blocks.

Elements are more granular than blocks. As the BEM documentation states: "An element is a part of a block that performs a specific function. Elements are context-dependent; they only make sense within their parent block."

A search form block, for instance, includes a text input element and a submit button element (Figure 2.5). Here, "element" refers to design elements, not HTML elements.

Figure 2.5. A search block with text input and submit button elements.

A main content block might contain an article list block, which in turn contains article promo blocks. Each promo block could have image, excerpt, and "Read More" elements (Figure 2.6).

Figure 2.6. A promotional block for a website article.

Blocks and elements form the core of BEM's naming convention:

• Block names must be unique project-wide.
• Element names must be unique within a block.
• Block variations (e.g., a dark search box) use modifiers in the class name.

Block and element names are separated by two underscores (__). Modifiers are separated from block/element names by two hyphens (--).

Here's a BEM-styled search form example:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

A dark-themed version:

<div class="search search--inverse">
  <div class="search__wrapper search__wrapper--inverse">
    <label for="s" class="search__label search__label--inverse">Search for:</label>
    <input type="text" id="s" class="search__input search__input--inverse" />
    <input type="submit" class="search__submit search__submit--inverse" value="Search" />
  </div>
</div>

Corresponding CSS:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

In the markup and CSS, search--inverse and search__label--inverse are added classes, not replacements. Only class selectors are used; child and descendant selectors are permitted but should also target classes. Element and ID selectors are avoided. This keeps selector specificity low, prevents side effects, and makes CSS independent of markup patterns. Unique block and element names prevent naming conflicts. Benefits include:

• Improved code readability and understanding for new team members.
• Increased team productivity.
• Reduced naming collisions and side effects.
• CSS independence from markup.
• High CSS reusability.

BEM's scope extends beyond this overview. The official BEM website provides comprehensive details, tools, and tutorials. "Get BEM" is another excellent resource for the naming convention.

(The Frequently Asked Questions section is omitted as it is a repetition of information already present and would significantly increase the length of the output without adding new content.)

The above is the detailed content of CSS Architecture Block-Element-Modifier (BEM) - SitePoint. For more information, please follow other related articles on the PHP Chinese website!