Understanding and Applying the BEM Naming Methodology in Frontend Development

1. Summary

When writing CSS you may struggle with class naming, fear style leakage, or wonder how to reuse component styles; the BEM naming method solves these problems by modularizing pages, isolating styles, and reducing maintenance costs.

2. Why BEM Naming Method

2.1 Style Isolation

CSS lacks scope, causing global pollution. BEM creates a pseudo‑scope using double underscores __ or double hyphens -- , e.g., .base-input__inner affects only its own element.

1 # 普通
2 .base input {}
3 # BEM命名法
5 .base-input__inner {}

2.2 Easier Override

With CSS modules the generated selector includes a hash, making it hard to target for overrides, whereas BEM provides predictable class names.

.base-input-sdFh3sxLwo5uer {}

2.3 Readability

The name base-input__inner instantly reveals that base is the component, input the element, and inner a sub‑part.

3. What Is BEM

BEM stands for Block, Element, Modifier. The naming pattern uses:

.block {}
.block__element {}
.block--modifier {}

block – high‑level component

block__element – descendant of the block

block--modifier – different state or version

3.1 Common Rules

Use separate words joined by a hyphen for multi‑word names, e.g., el-dropdown-menu , el-button . Connect block and element with __ , and element and modifier with -- , e.g., el-button--success . Prefix JavaScript‑controlled states with is- , such as is-success .

3.2 Common Element Names

Form elements: form form-item input select radio checkbox switch datePicker

Navigation: nav subnav menu tab

Notifications: alert message messageBox notification

Data display: table process tree pagination

Others: button icon

4. How to Use BEM Effectively

4.1 Page Naming

Prefix page‑level selectors with page- and optionally combine with CSS modules for unique hashed names.

# 编译前
.page-index {}
.page-zufang {}
# 编译后
.page-index-70yGFBg1eKjbSIwN {}
.page-zufang-mFTy62A1t83zjDbh {}

4.2 Shared Component Naming

Prefix shared components with base- , e.g., .base-input and .base-input__inner .

<div class="base-input">
  <input class="base-input__inner"/>
</div>

4.3 Local Component Naming

Prefix page‑specific components with the- , e.g., .the-header , .the-header__title .

<div class="the-header">
  <div class="the-header__title"/>
  <div class="the-header__desc"></div>
</div>

5. Additional Tips

5.1 Semantic Naming

Choose names that convey purpose without needing extra comments, such as is-float-left instead of cryptic fl .

5.2 Prefer Class Selectors

Avoid IDs, element tags, or pseudo‑classes for styling to keep scope limited.

5.3 Overriding Third‑Party Styles

Wrap third‑party components with a new class to prevent unintended side effects.

6. Conclusion

Why BEM is needed

What BEM is

How to use BEM effectively

Other considerations

7. References

[规范] CSS BEM 书写规范

css命名规范-BEM