「微信同款 UI 架构」揭秘：BEM + WEUI 的组件化开发实战

小公主
186 阅读3分钟

在前端开发中，CSS 命名混乱、样式难维护是许多项目的通病。随着项目体量增大，这种问题只会愈演愈烈。如何打造一套结构清晰、样式可复用的前端体系？答案可能就藏在“大厂思维”里。

微信官方推出的开源 UI 框架 WEUI，采用了 BEM（Block-Element-Modifier）命名规范，实现了高度组件化、工程化的开发体验。不仅样式组织清晰，还天然适配移动端，非常适合中小团队或个人项目快速构建高质量界面。

本文将以一个简单页面为起点，带你深入理解 BEM 的设计思想、WEUI 的实践方式，并分享我在实战中积累的一些经验。

一、BEM 到底是什么？

BEM 是一种 CSS 命名规范，核心思想是将页面结构拆分为三个层级：

  • Block（块） ：独立功能单元，如 .weui-page 或 .weui-btn；
  • Element（元素） ：Block 内部的组成部分，用 __ 连接，如 .weui-page__title；
  • Modifier（修饰符） ：表示不同状态或样式，用 _ 连接，如 .weui-btn_primary。

来看一个简单示例：

<a href="#" class="weui-btn weui-btn_primary">主要按钮</a>

在这个例子中：

  • .weui-btn 是 Block；
  • .weui-btn_primary 是 Modifier，表示“主要操作”的样式状态。

二、WEUI 中的 BEM 实践

下面是一个典型的按钮页面结构：

<div class="weui-page">
  <header class="weui-page__header">
    <h1 class="weui-page__title">按钮页面</h1>
    <p class="weui-page__desc">这是 WEUI 按钮演示</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>

结构拆解如下：

  • .weui-page 是页面容器（Block）；
  • .weui-page__header 和 .weui-page__body 是子元素（Element）；
  • .weui-btn 是按钮组件的 Block；
  • .weui-btn_primary 和 .weui-btn_default 是 Modifier，用于区分按钮状态。

CSS 也同样遵循模块化的设计：

.weui-page {
  padding: 18px;
}

.weui-page__header {
  padding: 40px;
}

.weui-page__title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.weui-page__desc {
  font-size: 12px;
  color: #123;
}

每个样式类名都能直接反映出它的模块归属与作用，维护起来非常直观。

三、WEUI 的组件化思维

WEUI 不只是命名规范的实践者，它更是一套完整的组件化设计体系。

例如，下面是一个个人信息展示区的结构：

<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）；
  • .weui-cell 是单元项；
  • .weui-cell__hd、.weui-cell__bd、.weui-cell__ft 分别表示头部、主体、尾部（Element）。

这样的设计让你可以像搭积木一样组合页面结构，复用率高，维护成本低。

四、为什么推荐 BEM + WEUI？

✅ 类名语义明确

命名具有强语义，一眼看懂样式来源与作用，修改更安全。

✅ 团队协作更高效

统一的规范让不同开发者写出的代码风格一致，有效降低沟通和维护成本。

✅ 样式可复用性强

一套组件样式可以灵活在多个页面中应用，实现“写一次，用无数次”。

✅ 天然适配移动端

WEUI 设计原生贴合微信生态，响应式布局对手机屏幕友好，适合小程序或 H5 项目。

五、总结：大厂经验的微缩版

即便是一个简单的按钮页面，从结构命名到样式定义，WEUI 和 BEM 所展现的都是一种“工程化、模块化、标准化”的开发理念。这不仅提高了代码质量，也为团队协作和长期维护打下坚实基础。

BEM 是规范，更是一种前端架构的思维方式；WEUI 是工具，更是一种工业级 UI 的实现路径。

如果你正在构建一个长期维护的项目，或者希望提升团队的前端协作效率，不妨尝试用 WEUI 和 BEM 打造属于你的高质量组件体系。

avatar
文章
阅读
粉丝