从WEUI框架学习BEM命名规范：让CSS代码像乐高一样优雅

最新推荐文章于 2025-06-01 09:03:57 发布

CbukeJ

最新推荐文章于 2025-06-01 09:03:57 发布

阅读量21

点赞数

CC 4.0 BY-SA版权

文章标签：学习 css 前端

原文链接：https://juejin.cn/post/7509431280951771145

前端开发中，CSS命名一直是个让人头疼的问题。随着项目规模扩大，命名冲突、样式污染等问题接踵而至。今天，我们就通过微信官方UI框架WEUI的源码，来深入探讨BEM（Block Element Modifier）这一国际通用的CSS命名规范，让你的代码像乐高积木一样清晰可维护！

为什么需要BEM？

想象一下，你在一个大型团队中协作开发，如果没有统一的命名规范：

小王写了.button { color: red; }
小李也写了.button { padding: 10px; }
产品经理突然要求某个特殊按钮要有不同的样式...

很快，你的CSS就会变成一锅粥，各种!important满天飞，维护成本直线上升。而BEM就是为了解决这些问题而生的方法论。

BEM的核心概念

BEM将界面拆分为三个层级，就像乐高积木一样：

1. Block（块）—— 独立的乐高积木

Block是一个独立的、可复用的组件单元，它就像乐高积木中的基础块。在WEUI中，每个页面被视为一个Block：

.weui-page {
    padding: 18px;
}

命名规则：项目前缀-块名（如.weui-page）

2. Element（元素）—— 积木上的凸起

Element是Block的组成部分，不能独立存在。就像乐高积木上的凸起，它们属于特定的积木：

<header class="weui-page__header">
    <h1 class="weui-page__title">Button</h1>
    <p class="weui-page__desc">按钮</p>
</header>

命名规则：块名__元素名（如.weui-page__title）

注意是双下划线！这是BEM的标志性符号。

3. Modifier（修饰符）—— 给积木换个颜色

Modifier定义了Block或Element的状态或变体。就像给乐高积木换个颜色：

<a href="#" class="weui-btn weui-btn_primary">主要操作</a>
<a href="#" class="weui-btn weui-btn_default">次要操作</a>

命名规则：块名_修饰符 或 块名__元素名_修饰符（如.weui-btn_primary）

注意是单下划线！

WEUI中的BEM实践

让我们看看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>
        
        <!-- 列表单元格 -->
        <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>
    </main>
</div>

这个结构中：

.weui-page 是整个页面的Block
__header, __title, __body 是其Elements
.weui-btn_primary 是按钮的Modifier
.weui-cells 是另一个独立的Block

BEM的黄金法则

不要嵌套过深：BEM本身就通过命名表达了层级关系，不需要.block .element这样的选择器
保持单一职责：每个Block应该只做一件事，就像乐高积木一样可以自由组合
避免全局样式：所有样式都应该属于某个Block或Element
修饰符可叠加：.weui-btn.weui-btn_primary是可以的

为什么大厂都爱BEM？

自文档化：看到类名就知道结构和关系
低耦合：修改一个Block不会影响其他部分
高复用：组件可以在不同项目中复用
团队协作：新人能快速理解代码结构

实战建议

在你的下一个项目中尝试BEM：

先划分功能区块（Block）
为每个区块定义子元素（Element）
为不同状态设计修饰符（Modifier）
保持命名一致性（建议制定团队规范）

/* 不好的写法 */
.user-info .title {
    color: red;
}

/* BEM写法 */
.user-info__title--highlight {
    color: red;
}

总结

BEM就像CSS界的乐高说明书，它通过严格的命名规范，让我们的代码：

模块化 - 像积木一样可拼装
可读性强 - 类名即文档
协作友好 - 团队有共同语言
易于维护 - 修改局部不影响全局

WEUI作为微信官方框架，采用BEM规范证明了其在大规模项目中的实用性。现在就开始在你的项目中使用BEM吧，让你的CSS代码像精心设计的乐高模型一样优雅坚固！