让我用weui告诉你什么是BEM——学会它再也不用担心命名！

引言

结合 weui（微信UI库）的示例，我将展示如何使用 BEM 命名规则来创建一个简单的微信按钮组件，并解释如何在其中应用 BEM 命名法。

css 复制代码

htmlCopy code
<div class="weui-btn weui-btn_default">按钮</div>

BEM概述

Block（块） :
- 在这个示例中，"weui-btn" 是块。它代表了一个按钮组件。
Element（元素） :
- 在按钮块中，"按钮" 文本被视为一个元素。在 BEM 中，我们可以用双下划线来表示元素。
ini 复制代码
```
htmlCopy code
<div class="weui-btn">
  <span class="weui-btn__text">按钮</span>
</div>
```
Modifier（修饰符） :
- 在 weui 中，按钮可以具有不同的样式，例如 "weui-btn_default" 表示按钮的默认样式。这是一个修饰符。
css 复制代码
```
htmlCopy code
<div class="weui-btn weui-btn_default">按钮</div>
```

通过结合 weui 的组件和 BEM 命名法，你可以创建清晰的、易于理解和维护的前端代码。这有助于确保一致性和避免样式冲突，特别是在构建大型微信小程序或Web应用时。

那我们就可以得到一个这样的简单的概述：

库名（weui） ：通常表示所使用的UI库或框架的名称。在这个例子中，它代表了微信的UI库。
组件（weui-btn） ：表示一个独立的UI组件或模块，可能会包含多个元素和状态。在这里，medio-box 可能是一个媒体盒子或卡片的组件。
状态（default） ：表示组件的状态或变种，通常用于表示特定交互状态或效果。在这里，appmsg 可能表示"应用消息"的状态或样式，可能用于区分不同类型的消息显示。
元素名（text） ：没有明确指定元素名，但如果有元素，通常用于描述组件内的特定部分或功能。

微信ui实例

那让我们来看看在真实的例子里BEM是怎么样的吧。

接下来我们复刻这样一个简单的样例。代码最终实现附在页面最后~

逐级拆分

第一次拆分

首先我们可以把这个页面简单的看为是上下两个部分：

整个页面我们可以称为page
一般我们利用__hd(head) __bd(body) __ft(front)来划分三同级块
那么此时就很简单了我们将它们分为page__hd和page__bd
通过这个我们简单认识一下它们三兄弟

第二次拆分

我们将page__hd和page__bd进行拆分

我们可以将page__hd又分为标题page__title和面板page__desc
然后我们在page__bd中终于发现了组件！page__bd中整体就是一个weui-panel组件
接下来我们就要开始拆分组件了

第三次拆分

我们依然是将组件拆为三部分

没错，我们还是用上了三兄弟，它们在这种三个以内的拆分中简直不要太好用，所以我们得到了weui-panel__hd weui-panel__bd weui-panel__ft
当然你会问，诶？标题二怎么没了，它不用分块吗？其实标题一和标题二除了内容不一样之外是一样的，所以我们只需要ctrl + c和ctrl + v复制一份weui-panel__bd就可以啦

第四次拆分

到了第四步你就发现，我们只剩下标题一那一块没有拆分了，由于整个标题一是可以跳转的，所以我们使用a标签并且作为一个新的组件

我们得到了一个新的组件weui-medio-box而我们这个组件会有一个状态，所以事实上我们应该有两个类名即weui-medio-box weui-medio-box_appmsg
然后依旧是左右两块，得到weui-medio-box__hd和weui-medio-box__bd

没错就这么简单你已经把这一个页面的框架搭好了，剩下的就是比较简单的亿点点css细节~~ 让我们看看框架的代码实现吧：

html 复制代码

<body>
  <div class="page">
    <div class="page__hd">
      <h1 class="page__title">Panel</h1>
      <p class="page__desc">面板</p>
    </div>
    <div class="page__bd">
      <!-- Panel组件 -->
      <div class="weui-panel">
        <div class="weui-panel__hd">
          图文组合列表
        </div>
        <div class="weui-paner__bd">
          <!-- 开始了一个新的 media-box 组件 B-->
          <a href="javascript:;" class="weui-medio-box weui-medio-box_appmsg">
            <div class="weui-medio-box__hd"> 
                <!-- 图片格式 base64 图片 -->
                <img alt="" class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgA...MwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" >
            </div>
            <div class="weui-medio-box__bd">
              <strong class="weui-media-box__title">标题一</strong>
              <p class="weui-media-box__desc">
                由各种物质组成的巨大球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
              </p>
            </div>
          </a>
          <a href="javascript:;" class="weui-medio-box weui-medio-box_appmsg">
            <div class="weui-medio-box__hd">
                <img alt="" class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgA...MwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" >
            </div>
            <div class="weui-medio-box__bd">
              <strong class="weui-media-box__title">标题二</strong>
              <p class="weui-media-box__desc">
                由各种物质组成的巨大球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
              </p>
            </div>
          </a>
        </div>
        <div class="weui-panel__ft">
          <a href="javascript:;" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

总结

通过这样一段实操下来我想大家也基本已经学会了怎么去对一个比较复杂的框架进行命名，这么多的名字如果我们都使用英文自己取名，恐怕光字典也翻了好几遍吧hh~，所以这就是BEM标准命名法的意义所在，通过这样的方式，我们可以轻松且有规律的完成大框架结构的命名。使用BEM让我们的代码更清晰，更易维护吧！

如果你想了解更多这类文章，点赞关注作者更新更多后续~