从零开始学 WEUI：用 BEM 命名规范打造优雅的微信前端 UI

我想说一句
190 阅读6分钟

引子：为什么我们要关心按钮怎么写？

你有没有遇到过这样的情况？一个项目刚接手，打开 CSS 文件一看，全是 .red、.left、.big 这样的类名，看得你一脸懵逼。然后你改了一行样式，整个页面乱了套——仿佛中了“牵一发而动全身”的诅咒。

这说明我们缺的不是代码，而是命名规范。而今天要讲的这个东西，就是让你告别“样式混乱地狱”的神器——BEM 命名规范，以及它在微信官方 UI 框架 WEUI 中的实战应用。

第一章：BEM 是什么鬼？

BEM 其实是一个听起来很高级、但其实特别接地气的命名规范。它的全称是：

Block Element Modifier

翻译成人话就是：

  • Block（块） ：一个独立的功能模块，比如按钮、表单、导航栏。
  • Element（元素）：属于某个 Block 的一部分，不能脱离 Block 存在，比如按钮里的文字、图标。
  • Modifier（修饰符）：用来描述状态或样式的变体，比如按钮的“主要”、“次要”、“禁用”状态。

看个例子你就懂了！

<div class="weui-page"> 
    <h1 class="weui-page__title">这是标题</h1> 
    <button class="weui-btn weui-btn_primary">主要按钮</button> 
</div>

在这个例子里：

  • .weui-page 是 Block；
  • .weui-page__title 是 Block 下的 Element；
  • .weui-btn_primary 是 Button 的 Modifier，表示这是一个“主要按钮”。

是不是比以前那种 .btn-blue 或者 .btn-red 干净多了？

第二章：WEUI 的 BEM 实践 —— 把按钮玩出花来

WEUI 是微信官方推出的一套 UI 样式库，风格简洁现代，适用于微信小程序和 H5 页面开发。它完美地运用了 BEM 命名规范，使得代码结构清晰、易于维护。

我们来看一段典型的 WEUI 结构：

<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">
            <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>

这段 HTML 展示了一个完整的页面结构，使用了 WEUI 提供的多个组件，每个组件都遵循了 BEM 命名规则：

  • weui-page 是页面级别的 Block；
  • weui-page__header 和 weui-page__body 是该 Block 的 Elements；
  • "button-sp-area就是包裹按钮的一个区域
  • weui-btn 是按钮 Block；
  • weui-btn_primary 和 weui-btn_default 是按钮的 Modifiers，分别表示主要按钮和次要按钮。

这样写的代码，不仅一眼就能看懂结构，还方便后期维护和扩展。

第三章：BEM 的三大法宝 —— Block、Element、Modifier

1. Block：项目的“积木”

Block 是一个独立的功能单元，它可以单独存在，也可以包含其他元素。比如：

  • .weui-btn：按钮；
  • .weui-cell：列表项；
  • .weui-form：表单。

这些 Block 都可以被复用到不同的页面中，就像搭积木一样简单。

举个栗子🌰：

<button class="weui-btn">普通按钮</button>

<button class="weui-btn weui-btn__disabled">禁用按钮</button>

这样也方便复用，不需要重新写一个类来修饰我们的按钮

2. Element：Block 的“小弟”

Element 是 Block 的组成部分，不能脱离 Block 使用。例如：

  • .weui-cell__hd：cell 组件的头部；
  • .weui-cell__bd：cell 的主体内容；
  • .weui-cell__ft：cell 的尾部。

举个栗子🌰：

<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>

分析如下：

类名角色解释
.weui-cells✅ Block表示“一组 cell 的容器”，是 WEUI 提供的一个组件
.weui-cells__title✅ Element属于 weui-cells 的标题部分
.weui-cell✅ Block单个 cell 组件本身也是一个 Block
.weui-cell__hd✅ Element属于 weui-cell 的头部元素
.weui-cell__bd✅ Element属于 weui-cell 的主体内容
.weui-cell__ft✅ Element属于 weui-cell 的尾部内容

3. Modifier：给 Block 或 Element 加点“料”

Modifier 是 Block 或 Element 的状态或样式变化。通常以 _ 开头，表示它是某种变体。

  • .weui-btn_primary：主要按钮；
  • .weui-btn_disabled：禁用按钮；
  • .weui-cell_access：带箭头的 cell。

举个栗子🌰：

<button class="weui-btn weui-btn_primary">主要按钮</button>
<button class="weui-btn weui-btn_disabled">禁用按钮</button>

下面两个表示的都是状态

  • weui-btn_primary：主要按钮
  • weui-btn_disabled：禁用的按钮

也是方便后期复用，不需要写多余的类来修饰另一个block的按钮

第四章：为什么大厂都在用 BEM？

你以为 BEM 只是写个类名那么简单吗？不，它背后藏着一套工程化思维。

✅ 清晰的结构

BEM 让你在写代码的时候就明确知道：

  • 这个组件是什么（Block）；
  • 它里面有哪些部分（Elements）；
  • 它有什么状态（Modifiers）。

✅ 易于协作

想象一下，如果你和五个同事一起开发一个大型项目，大家随便起名字，那 CSS 就会变成一个“谁也不知道哪个类是干嘛的”的恐怖现场。而 BEM 规范统一了命名方式，让团队成员都能轻松理解彼此的代码。

✅ 便于维护和重构

有了 BEM，你可以很容易地定位某个组件的样式，并且不会影响到其他部分。比如你想改一下“主要按钮”的颜色，只需要修改 .weui-btn_primary 即可，不需要担心会不会误伤到别的按钮。

✅ 更好的组件化思想

BEM 鼓励我们把页面拆分成一个个小的组件，这种“组件化开发”思想正是现代前端开发的核心之一。不管是 Vue、React 还是 Angular，它们的本质也都是组件化。

第五章：从模仿到创新 —— 学习 WEUI 源码的正确姿势

很多小伙伴学习框架都喜欢“抄”，直接复制粘贴代码。但如果你想真正提升自己，建议你去看看 WEUI 的源码是怎么写的。

比如，你可以在 GitHub 上找到 WEUI 的开源项目，研究它的 CSS 文件结构：

.weui-btn {
    /* 基础样式 */
}

.weui-btn_primary {
    /* 主要按钮的样式 */
}

.weui-btn_default {
    /* 次要按钮的样式 */
}

你会发现，它对每一个 Block、Element、Modifier 都有非常清晰的命名逻辑，几乎不需要注释也能看懂。

第六章：动手实践 —— 用 BEM 写一个自己的组件

纸上得来终觉浅，咱们来实战一把。

假设我们要写一个“用户卡片”组件：

<div class="user-card">
    <div class="user-card__avatar">
        <img src="avatar.jpg" alt="头像">
    </div>
    <div class="user-card__info">
        <h3 class="user-card__name">张三</h3>
        <p class="user-card__bio">前端开发者 | 爱写博客 | 喜欢吃火锅</p>
    </div>
    <button class="user-card__action user-card__action_follow">关注</button>
</div>

对应的 CSS：

.user-card {
    display: flex;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.user-card__avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.user-card__name {
    font-size: 18px;
    margin: 0;
}

.user-card__bio {
    color: #666;
}

.user-card__action {
    margin-left: auto;
    padding: 8px 16px;
    background-color: #07c160;
    color: white;
    border: none;
    border-radius: 4px;
}

.user-card__action_follow {
    background-color: #ff9900;
}

image.png 你看，这个组件结构清晰、样式独立，还能通过 Modifier 来切换不同状态（比如“已关注”和“未关注”），简直不要太爽

第七章：结语 —— 成为更好的自己

写到这里，我突然想起一句话：

“代码是写给人看的，偶尔给机器跑一下。”

没错，编程不仅是写给计算机执行的指令，更是写给人类阅读的文档。而 BEM 命名规范，就是帮助我们写出更清晰、更易读、更可维护代码的重要工具。

希望你能从这篇文章中学到一点东西，哪怕只是记住一句：“Block 是爸爸，Element 是儿子，Modifier 是穿衣服的道具。”😄

📌 附录：常用 WEUI 组件一览

组件名描述
.weui-btn按钮
.weui-cell列表项
.weui-form表单
.weui-toast轻提示
.weui-dialog对话框
.weui-loading加载动画
avatar
文章
阅读
粉丝