BEM 命名规范 + CSS Reset 实战：从微信按钮页面看专业前端开发

为什么大厂前端都用 BEM 命名？为什么 CSS Reset 不用 * 通配符？这篇文章通过一个完整的微信风格按钮页面，带你掌握 BEM 命名规范和专业的 CSS Reset 写法。

前言

今天课程学习了 BEM 命名规范 和 CSS Reset，并用它们搭建了一个微信风格的按钮页面。

BEM 是国际上广泛使用的 CSS 命名规范，解决了"写页面命名难"的问题。而 CSS Reset 则是每个专业前端项目的基础------把浏览器默认样式重置为一张干净的白纸。

这篇文章将带你从零搭建一个完整的页面，理解 BEM 的精髓和 CSS Reset 的专业写法。

一、BEM 命名规范：国际标准 vs 微信 WeUI 实践

1.1 什么是 BEM？

BEM = B lock（块）+ E lement（元素）+ Modifier（修饰符）

BEM 是国际上广泛使用的 CSS 命名规范。但在实际应用中，不同团队会根据自己的需求做一些调整。微信 WeUI 框架就是在 BEM 基础上发展出了自己的命名风格。

1.2 国际标准 BEM vs 微信 WeUI

维度	国际标准 BEM	微信 WeUI 实践
项目前缀	无	`weui-` 前缀（如 `.weui-btn`）
Block-Element	`__` 双下划线	`__` 双下划线（一致）
Block-Modifier	`--` 双横线（如 `.btn--primary`）	`_` 单下划线（如 `.weui-btn_primary`）
命名风格	纯功能命名	项目代号 + 功能命名

lua 复制代码

命名对比示例

国际标准 BEM：
.btn                    ← Block
.btn__icon              ← Element
.btn--primary           ← Modifier（双横线）
.btn--large             ← Modifier

微信 WeUI：
.weui-btn               ← Block（带 weui- 前缀）
.weui-btn__icon         ← Element
.weui-btn_primary       ← Modifier（单下划线）
.weui-btn_default       ← Modifier

📌 关键区别 ：WeUI 使用 _ 单下划线连接 Modifier，而国际标准 BEM 通常使用 -- 双横线。WeUI 还增加了 weui- 项目前缀，避免与其他样式冲突。

1.3 三大组成部分

组成部分	含义	示例	说明
Block	独立的区块/组件	`.weui-btn`、`.weui-page`	可以复用的独立模块，带项目前缀
Element	Block 的子元素	`.weui-page__header`、`.weui-page__title`	依附于 Block 存在
Modifier	状态/变体	`.weui-btn_primary`、`.weui-btn_default`	表示不同的状态或样式

1.4 实际代码示例（WeUI 风格）

html 复制代码

<!-- WeUI 风格的 BEM 命名 -->
<div class="weui-page">
    <header class="weui-page__header">
        <h1 class="weui-page__title">Button</h1>
        <p class="weui-page__desc">按钮组件展示</p>
    </header>
    <main class="weui-page__body">
        <div class="button-sp-area">
            <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
            <a href="#" class="weui-btn weui-btn_default">次要操作</a>
        </div>
    </main>
</div>

1.5 命名解析

scss 复制代码

WeUI 页面结构解析

.weui-page                    ← Block：页面容器（带 weui- 前缀）
├── .weui-page__header        ← Element：页面头部
│   ├── .weui-page__title     ← Element：页面标题
│   └── .weui-page__desc      ← Element：页面描述
│
└── .weui-page__body          ← Element：页面主体
    └── .button-sp-area       ← Block：按钮区域
        ├── .weui-btn.weui-btn_primary   ← Block + Modifier：主要按钮
        └── .weui-btn.weui-btn_default   ← Block + Modifier：默认按钮

1.6 WeUI 命名中的缩写惯例

微信 WeUI 框架中，Element 命名常用缩写，这是 WeUI 的特色：

缩写	全称	示例
`hd`	header	`.weui-page__hd`
`bd`	body	`.weui-page__bd`
`ft`	foot/footer	`.weui-cell__ft`
`desc`	description	`.weui-page__desc`

💡 注意：.page__hd 和 .page__bd 中的 hd/bd 是 WeUI 的缩写风格，标准 BEM 可能会用更完整的 .page__header、.page__body。

1.7 BEM 的优势

优势	说明
国际规范	全球前端开发者都遵守，团队协作无障碍
结构清晰	一眼看出元素之间的关系
避免冲突	`weui-` 前缀避免与业务代码样式冲突
组件化开发	每个 Block 都是独立组件，便于复用
解决命名难	不用想破头起类名，按规则来就行

💡 对比：没有 BEM 命名规范，可能要写 3 个单词才能表达清楚，如 .page-header-title。用 BEM 只需 .weui-page__title，结构一目了然，还带有项目前缀避免冲突。

二、CSS Reset：把页面变成干净的白纸

2.1 为什么需要 CSS Reset？

不同浏览器对 HTML 元素的默认样式不同：

css 复制代码

浏览器默认样式差异

Chrome：body 有 8px margin
Firefox：body 有 8px margin，但其他元素可能不同
Safari：列表有 padding-left
...

如果不重置，页面在不同浏览器下显示不一致！

2.2 为什么不用 `*` 通配符？

css 复制代码

/* ❌ 不推荐：性能差 */
* {
    margin: 0;
    padding: 0;
}

/* ✅ 推荐：精确匹配，性能更好 */
html, body, div, span, h1, h2, h3, p, a, ul, li, ... {
    margin: 0;
    padding: 0;
}

方式	性能	说明
`*` 通配符	❌ 差	贪婪匹配，遍历所有元素
精确匹配	✅ 好	只匹配需要的元素

📌 * 是贪婪的，会匹配页面上的每一个元素，性能开销大。专业做法列出所有需要重置的元素。

2.3 专业的 CSS Reset

css 复制代码

/* 全球通用规范 CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* HTML5 块级元素兼容 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    min-height: 100vh;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button, input, select, textarea {
    font: inherit;
    background: transparent;
    border: none;
    outline: none;
}

img, svg, picture, video {
    max-width: 100%;
    display: block;
}

2.4 Reset 内容解析

重置项	作用
`margin: 0; padding: 0`	清除默认边距
`border: 0`	清除默认边框
`font-size: 100%`	统一字体大小基准
`font: inherit`	继承父元素字体
`box-sizing: border-box`	盒模型统一为 border-box
`list-style: none`	清除列表默认样式
`text-decoration: none`	清除链接下划线
`background: transparent`	清除按钮默认背景

三、页面布局：从结构到样式

3.1 先写结构，再写样式

优秀的套路：先写 HTML 结构，再写 CSS 样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信按钮页面</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="page">
        <header class="page__hd">
            <h1 class="page__title">这是一个页面</h1>
            <p class="page__desc">这是一个页面的描述</p>
        </header>
        <main class="page__bd">
            <div class="button-sp-area">
                <a href="#" class="weui-btn weui-btn_primary">主要按钮</a>
                <a href="#" class="weui-btn weui-btn_default">次要按钮</a>
                <a href="#" class="weui-btn weui-btn_default">次要按钮</a>
            </div>
        </main>
    </div>
</body>
</html>

3.2 页面容器样式

css 复制代码

.page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 背景调试大法好 */
}

💡 背景调试法：开发时给元素加背景色，方便观察盒模型和布局。

3.3 头部区域

css 复制代码

.page__hd {
    padding: 40px;
}

.page__title {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}

.page__desc {
    margin-top: 4px;
    color: rgba(0, 0, 0, 0.45);
    text-align: left;
    font-size: 14px;
}

3.4 按钮组件

css 复制代码

.button-sp-area {
    text-align: center;
    margin: 15px auto;
    padding: 15px;
}

.weui-btn {
    position: relative;
    display: block;
    min-width: 184px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 24px;  /* 顺时针：上 右 下 左 */
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 1.41176471;
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
}

.weui-btn_primary {
    background-color: #07c160;  /* 微信绿 */
}

.weui-btn_default {
    color: rgba(0, 0, 0, 0.9);
    background-color: rgba(0, 0, 0, 0.1);
}

四、CSS 技巧详解

4.1 相邻兄弟选择器 `+`

css 复制代码

/* 选择相邻的兄弟元素 */
.weui-btn + .weui-btn {
    margin-top: 15px;
}

作用：给相邻的 .weui-btn 之间添加 15px 的间距。

css 复制代码

选择器解析

.weui-btn + .weui-btn
     │    │      │
     │    │      └── 目标：后面的 .weui-btn
     │    └───────── 相邻兄弟选择器
     └────────────── 前面的 .weui-btn

效果：
┌─────────────┐
│  主要按钮    │  ← 第 1 个，不加 margin-top
├─────────────┤
│  次要按钮    │  ← 第 2 个，margin-top: 15px
├─────────────┤
│  次要按钮    │  ← 第 3 个，margin-top: 15px
└─────────────┘

📌 选择器选择的是最后的部分 ：A + B 选择的是 B，条件是 B 前面有相邻的 A。

4.2 padding 顺时针设置

css 复制代码

padding: 12px 24px;
/* 顺时针：上(12) 右(24) 下(12) 左(24) */

padding: 10px 20px 30px 40px;
/* 顺时针：上(10) 右(20) 下(30) 左(40) */

4.3 line-height 的精确计算

css 复制代码

line-height: 1.41176471;

UI 设计师标注：font-size: 17px，button 高度 24px。计算：24 / 17 = 1.41176471（取 8 位小数）

这是微信设计团队的精确还原设计稿的做法。

五、HTML5 语义化标签

html 复制代码

<!-- 语义化标签替代 div -->
<header class="page__hd">   <!-- 页头 -->
<main class="page__bd">     <!-- 主体内容 -->

语义化标签	含义	替代
`<header>`	页头区域	`<div class="header">`
`<main>`	主要内容	`<div class="main">`
`<footer>`	页脚区域	`<div class="footer">`
`<nav>`	导航	`<div class="nav">`
`<article>`	独立文章	`<div class="article">`
`<section>`	章节	`<div class="section">`

💡 语义化标签让代码更易读，对 SEO 和屏幕阅读器更友好。

六、AI Prompt：让 AI 帮你写代码

课程中老师分享了用 AI 写前端代码的 Prompt 技巧：

arduino 复制代码

AI Prompt 模板

1. 语义化标签
   "使用 HTML5 语义化标签构建页面结构"

2. BEM 命名规范
   "使用 BEM 命名规范命名 CSS 类名"

3. CSS Reset
   "使用专业的 CSS Reset，不要用 * 通配符"
   "参考 normalize.css 的做法，列出所有需要匹配的元素"

七、知识图谱

scss 复制代码

📚 BEM + CSS Reset 知识图谱

BEM 命名规范
├── 国际标准 BEM
│   ├── Block：.btn
│   ├── Element：.btn__icon
│   └── Modifier：.btn--primary（双横线）
│
├── 微信 WeUI 实践
│   ├── 项目前缀：weui-
│   ├── Block：.weui-btn
│   ├── Element：.weui-page__header
│   └── Modifier：.weui-btn_primary（单下划线）
│
├── 连接符对比
│   ├── __ 双下划线：Block + Element（一致）
│   ├── -- 双横线：Block + Modifier（国际标准）
│   └── _ 单下划线：Block + Modifier（WeUI）
│
└── WeUI 缩写惯例
    ├── hd = header
    ├── bd = body
    └── ft = foot/footer

CSS Reset
├── 为什么不用 * 通配符
│   └── 性能差，贪婪匹配
├── 专业做法
│   └── 列出所有需要重置的元素
├── 核心重置项
│   ├── margin / padding / border: 0
│   ├── box-sizing: border-box
│   ├── list-style: none
│   └── text-decoration: none
└── HTML5 兼容
    └── display: block

CSS 技巧
├── 相邻兄弟选择器 +
├── padding 顺时针设置
├── line-height 精确计算
└── 背景调试法

页面开发流程
├── 先写 HTML 结构
├── 再写 CSS 样式
├── BEM 命名（WeUI 风格）
└── CSS Reset 打底

结语

BEM 命名规范和 CSS Reset 是前端开发的基础功。掌握它们，你的代码会更专业、更易维护、更易于团队协作。

记住三个核心原则：

BEM 命名：Block__Element_Modifier，结构清晰
CSS Reset ：精确匹配，不用 * 通配符
先结构后样式：HTML 语义化，CSS 模块化

希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区交流。

📌 参考资源

BEM 官方文档

Normalize.css

微信 WeUI 设计规范

📌 文章标签 CSS BEM CSS-Reset 前端开发 命名规范 微信WeUI 学习笔记

觉得有收获？点个赞鼓励一下吧！有问题欢迎评论区留言～ 👍

BEM 命名规范 + CSS Reset 实战：从微信按钮页面看专业前端开发