BEM命名规范中block__element__element与block__element-element的区别及命名疑问

Great question! BEM naming can feel a bit confusing when you're navigating edge cases like these, so let's break this down clearly.

1. Difference between block__element__element and block__element-element in BEM #

First, a quick recap of BEM's core rules to set context: BEM stands for Block, Element, Modifier. Elements are parts of a Block that can't exist on their own, and their naming should only tie them to their parent Block—not mirror the DOM's nested structure.

• block__element__element: This is invalid BEM syntax. The double underscore __ is exclusively used to link a Block to its direct Elements. Writing something like menu__item__title incorrectly implies that title is an Element of menu__item, but BEM doesn't allow Elements to have their own sub-Elements. This approach mixes up DOM hierarchy with BEM's structure, which defeats one of BEM's biggest strengths: keeping class names decoupled from HTML structure.

• block__element-element: This is valid BEM syntax. Here, element-element is just a multi-word Element name, separated by hyphens (BEM recommends hyphens for multi-word names to keep things readable). For example, menu__item-title refers to a "title that belongs to a menu item"—it's a single Element of the menu Block, with a descriptive name that makes its role obvious.

2. Distinguishing the menu's title vs. menu item titles #

If your menu Block has its own title and each menu__item also has a title, the solution is to use distinct, role-based Element names to tell them apart:

Option 1: Keep everything within the menu Block #

• Use menu__title for the main menu title (the one attached directly to the menu Block itself).
• Use menu__item-title for the title inside each menu__item Element.

Your HTML would look like this:

<div class="menu">
  <div class="menu__title">Main Menu</div>
  <div class="menu__item">
    <div class="menu__item-title">Home</div>
  </div>
  <div class="menu__item">
    <div class="menu__item-title">About</div>
  </div>
</div>

Option 2: Elevate menu__item to its own Block (for reusability) #

If menu__item might be used independently of the menu Block (e.g., in a sidebar, dropdown, or other component), you can turn it into a standalone Block called menu-item. Then:

• Use menu__title for the main menu title.
• Use menu-item__title for the title of each menu-item Block.

Here's what that HTML would look like:

<div class="menu">
  <div class="menu__title">Main Menu</div>
  <div class="menu-item">
    <div class="menu-item__title">Home</div>
  </div>
  <div class="menu-item">
    <div class="menu-item__title">About</div>
  </div>
</div>

The core idea here is that BEM relies on descriptive, purpose-driven names rather than DOM nesting. As long as each Element's name clearly communicates its role (either within the parent Block or as a standalone Block), you'll avoid any confusion between the two titles.

内容的提问来源于stack exchange，提问作者chickenDinner