使用 BEM 命名规范开发网页：从 WEUI 按钮设计实战出发在现代前端开发中，随着项目规模的扩大和团队协作的加强，如何

在现代前端开发中，随着项目规模的扩大和团队协作的加强，如何保持 CSS 的结构清晰、易于维护成为了关键问题。BEM（Block Element Modifier）命名规范正是为了解决这一问题而诞生的一种模块化开发方法。

本文将以一个基于 WEUI 框架风格 的按钮页面为例，带你深入理解 BEM 的核心概念，并通过实际代码演示其在项目中的具体应用。

一、什么是 BEM？

BEM 是一种用于构建可复用 UI 组件的命名约定，它将界面划分为三个基本层级：

层级	含义	示例
Block（块）	独立的组件或功能区域	`.weui-page`
Element（元素）	块的组成部分，不能独立存在	`.weui-page__header`
Modifier（修饰符）	表示块或元素的状态或变体	`.weui-btn_primary`

💡 命名格式：

Block: block-name

Element: block-name__element-name

Modifier: block-name__element-name_modifier-name

二、案例分析：WEUI 风格按钮页面

我们来看一个典型的 WEUI 风格页面结构，使用了 BEM 规范进行类名命名：

<!-- Block -->
<div class="weui-page">
  <!-- Element -->
  <header class="weui-page__header">
    <h1 class="weui-page__title">Button</h1>
    <p class="weui-page__desc">按钮</p>
  </header>
  <main class="weui-page__body">
    <!-- Button Block -->
    <div class="button-sp-area">
      <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
      <a href="#" class="weui-btn weui-btn_default">次要操作</a>
    </div>

    <!-- Cell Block -->
    <div class="weui-cells">
      <h3 class="weui-cells__title">个人信息</h3>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <img src="" alt="">
        </div>
        <div class="weui-cell__bd">
          <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">
          说明文字
        </div>
      </div>
    </div>

    <!-- Form Block -->
    <div class="weui-form">
      <div class="weui-form__hd"></div>
      <div class="weui-form__bd"></div>
      <div class="weui-form__ft"></div>
    </div>
  </main>
</div>

三、BEM 在实例中的体现

1. Block：`.weui-page`, `.weui-cells`, `.weui-btn`, `.weui-form`

这些是页面中各自独立的组件块，具有明确的功能边界。

.weui-page：整个页面容器；
.weui-cells：信息展示区块；
.weui-btn：按钮组件；
.weui-form：表单组件。

2. Element：`.weui-pageheader`, `.weui-cellbd`, `.weui-form__hd`

每个 Block 内部的子部分都使用 __ 来标识其属于哪一个 Block。

.weui-page__header：表示 weui-page 这个块的头部区域；
.weui-cell__bd：表示 weui-cell 中的内容主体部分。

3. Modifier：`.weui-btn_primary`, `.weui-btn_default`

修饰符用于描述状态或样式变化。

.weui-btn_primary：主按钮样式；
.weui-btn_default：默认按钮样式。

四、BEM 带来的优势

✅ 更好的可读性

开发者一眼就能看出类名所代表的含义和层级关系，例如：

.weui-btn_primary {
  background-color: #07c160;
}

这表明这是一个按钮（btn）的主要样式（primary），无需查找上下文即可理解。

✅ 更强的可维护性

由于 BEM 的模块化结构，修改某一块不会影响其他模块，避免了样式污染和命名冲突。

✅ 更高的复用性

像 .weui-btn 这样的通用组件可以在多个页面中直接复用，只需通过不同的修饰符控制样式。

✅ 更好的团队协作

统一的命名规范使得多人协作更加高效，新成员也能快速上手项目。

五、拓展：BEM 的变种与灵活运用

虽然标准 BEM 推荐使用双下划线和双连字符的形式，但在实际项目中也可以根据需要进行简化或扩展：

BEMIT：在 Modifier 后加上类型（Type），如 --hover、--active。
双破折号写法：.block__element--modifier
命名空间前缀：如 .tm-page（tm 为项目代号）。

此外，BEM 可以与其他架构方式结合使用，如 SMACSS、OOCSS 等，形成更强大的 CSS 架构体系。

六、结语

通过本篇文章，我们不仅了解了 BEM 的基本概念，还通过一个 WEUI 风格的按钮页面展示了其在实际项目中的应用价值。无论你是前端初学者还是资深开发者，掌握并实践 BEM 命名规范，都将极大地提升你的代码质量和团队协作效率。

📌 建议：

在团队中推广统一的 BEM 规范；

将常用组件封装成 Block，便于复用；

结合工具（如 Sass、PostCSS）自动生成符合 BEM 规范的类名。

让我们一起用 BEM 打造更清晰、更优雅、更易维护的前端代码！

📌 欢迎点赞、收藏、转发，有任何疑问也欢迎留言交流！

使用 BEM 命名规范开发网页：从 WEUI 按钮设计实战出发