关于BEMIT规范嵌套元素类命名的拓展探讨与意见征询

Hey Roberto, great question—this is a super common point of confusion when applying BEM (and its extension BEMIT) to nested DOM structures, so let’s unpack the tradeoffs here.

First, a quick refresher on BEM’s core principle: BEM stands for Block__Element--Modifier, where Elements are direct children of the Block in terms of responsibility, not necessarily DOM structure. The official BEM guidelines discourage nested element naming (like __title__icon) because it creates unnecessary coupling between your DOM hierarchy and your CSS class names.

Let’s break down the two approaches you’re considering:

1. The Traditional BEM Approach: o-item__icon #

This is the industry standard for a reason. By treating the icon as a direct element of the o-item block, you decouple the CSS from the exact DOM nesting. If later you need to move the icon from inside the title to next to the text, you don’t have to change the class name or rewrite any CSS—it just works. This keeps your codebase flexible and easier to maintain as components evolve.

If you need to distinguish this icon from other potential icons in the o-item block (say, a separate icon in the text area), you can use a modifier: o-item__icon--title. This keeps the BEM structure intact while adding clear context about the icon’s purpose or location.

2. The Nested Approach: o-item__title__icon #

While this naming logically reflects the DOM hierarchy (icon is a child of the title, which is a child of the item), it introduces a few key downsides:

• Coupling to DOM structure: If you ever rearrange the DOM (e.g., move the icon outside the title), you’ll have to rename the class and update all associated CSS.
• Increased specificity: Nested class names can lead to higher CSS specificity, making it harder to override styles later if needed.
• Violates BEM’s flat element structure: BEM is designed to keep elements directly tied to the block, not nested within other elements, to promote reusability and clarity.

That said, there’s a rare exception: if this icon is exclusively tied to the title, will never be reused elsewhere in the block, and its styles are completely dependent on the title’s state (e.g., it only shows when the title is hovered), some teams might allow this pattern. But it’s still not the recommended best practice.

Final Recommendation #

Stick with o-item__icon (plus a modifier like --title if needed) to align with BEM/BEMIT best practices. It keeps your code flexible, maintainable, and consistent with how most teams implement the spec.

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