告别命名混乱！5步掌握BEM规范，写出易维护的前端页面

GuWenyue
0 阅读4分钟

一、开篇直击痛点

你是不是也遇到过这些问题：

  • 写页面时class命名全凭感觉，后期维护找不到对应样式？
  • 团队协作时，每个人的命名风格不同，代码乱糟糟？
  • 按钮、页面模块样式重置时，总出现兼容性问题？

今天这篇文章，我会用实战场景带你吃透BEM命名规范，搭配CSS重置技巧，5步写出结构清晰、易维护的前端页面，不管是个人开发还是团队协作，都能让你的样式代码更规范！

二、什么是BEM？先搞懂核心概念

BEM是国际通用的CSS命名规范，全称是 Block（区块）、Element（元素）、Modifier（修饰符），解决的核心问题就是「命名难、维护难」。

image.png

2.1 核心组成拆解

  • Block（区块）：独立的页面模块，比如页面整体.page、按钮组件.weui-btn，是样式的顶级容器。
  • Element（元素）：区块内的子元素，比如页面头部.page_hd、页面主体.page_bd，用_连接区块和元素。
  • Modifier（修饰符）：元素/区块的状态，比如按钮的「禁用态」「主要态」，用于区分不同样式。

2.2 BEM的核心优势

✅ 国际规范，团队协作无沟通成本
✅ 结构清晰，维护时一眼找到对应样式
✅ 命名简单易读，只用基础英文单词
✅ 彻底解决「命名纠结症」，不用再想复杂的类名

三、实战场景：用BEM写一个微信风格的按钮页面

接下来我们用BEM规范，从零实现一个微信UI风格的按钮页面，包含页面布局、按钮样式、样式重置，全程可直接复制运行！

3.1 第一步：CSS重置（CSS Reset）

不同浏览器的默认样式差异大，第一步先重置样式，把页面变成「干净的白纸」。我们用normalize.css的核心思路，只保留必要的重置：

/* CSS重置：消除默认样式差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 17px; /* 微信设计标注默认字号 */
  line-height: 1.41176471; /* 24/17，微信设计标注行高 */
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

3.2 第二步：用BEM定义页面区块

页面分为头部（hd）和主体（bd），用BEM命名：

<!-- 页面区块：Block -->
<div class="page">
  <!-- 页面头部：Element -->
  <div class="page_hd">
    <h1>微信风格按钮演示</h1>
  </div>
  <!-- 页面主体：Element -->
  <div class="page_bd">
    <!-- 按钮区域，后续添加按钮 -->
  </div>
</div>

/* 页面区块样式 */
.page {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面头部 */
.page_hd {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

/* 页面主体 */
.page_bd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

3.3 第三步：用BEM实现微信风格按钮

以微信UI的.weui-btn为例，结合修饰符实现「主要按钮」「禁用按钮」「默认按钮」：

<div class="page_bd">
  <!-- 默认按钮：Block -->
  <button class="weui-btn">默认按钮</button>
  <!-- 主要按钮：Block + Modifier -->
  <button class="weui-btn weui-btn_primary">主要按钮</button>
  <!-- 禁用按钮：Block + Modifier -->
  <button class="weui-btn weui-btn_disabled" disabled>禁用按钮</button>
</div>

/* 按钮基础样式：Block */
.weui-btn {
  height: 24px; /* 微信设计标注高度 */
  padding: 0 15px;
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.41176471;
}

/* 主要按钮：Modifier */
.weui-btn_primary {
  background-color: #07c160;
  color: #fff;
}

/* 禁用按钮：Modifier */
.weui-btn_disabled {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
}

3.4 第四步：完整可运行代码

把上面的代码整合，直接复制到HTML文件就能运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BEM实战：微信风格按钮页面</title>
  <style>
    /* CSS重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-size: 17px;
      line-height: 1.41176471;
    }

    button {
      border: none;
      outline: none;
      cursor: pointer;
    }

    /* 页面区块 */
    .page {
      width: 100%;
      max-width: 750px;
      margin: 0 auto;
      padding: 20px;
    }

    .page_hd {
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
    }

    .page_bd {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* 按钮样式 */
    .weui-btn {
      height: 24px;
      padding: 0 15px;
      border-radius: 4px;
      font-size: 17px;
      line-height: 1.41176471;
    }

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

    .weui-btn_disabled {
      background-color: #eee;
      color: #999;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="page_hd">
      <h1>微信风格按钮演示</h1>
    </div>
    <div class="page_bd">
      <button class="weui-btn">默认按钮</button>
      <button class="weui-btn weui-btn_primary">主要按钮</button>
      <button class="weui-btn weui-btn_disabled" disabled>禁用按钮</button>
    </div>
  </div>
</body>
</html>

3.5 踩坑提醒（重点！）

  1. ❌ 不要过度嵌套：BEM不推荐page_hd_title这种多层元素命名，保持「区块_元素」两层即可，多层嵌套用CSS层级控制。
  2. ❌ 修饰符不要单独用：比如不能只写weui-btn_primary，必须搭配基础区块weui-btn。
  3. ❌ 重置样式不要贪多：只重置必要的元素（如body、button、*），过多重置会增加冗余。
  4. ✅ 行高计算要精准：微信设计标注的24px高度/17px字号，行高要保留8位小数（1.41176471），保证视觉一致性。

四、总结

  1. BEM规范核心是「区块-元素-修饰符」，用_分隔区块和元素，修饰符作为状态补充；
  2. CSS重置是页面开发的基础，能消除浏览器兼容性问题；
  3. 结合实战场景（如微信按钮），能更快掌握BEM的实际用法；
  4. 遵守命名规则，避免过度嵌套、单独使用修饰符等坑，代码维护效率提升80%。

五、最后

这篇文章的核心代码已经全部贴出，如果你想查看完整的源码（包含更多微信UI组件的BEM实现），可以访问我的GitHub仓库【此处替换为你的仓库地址】，里面还有更多实战案例和踩坑总结，帮你彻底吃透BEM规范！

avatar
文章
阅读
粉丝