引言

想象一个场景，如果你在面试，和对面的面试官用的是同一套“剑法”，那你是否会觉得同根生而惺惺相惜呢？不可否置，相信对面的面试官也会觉得“终于等到你”，如果有些习惯根正苗红，那么你将获得来自前辈的认同感。

BEM

什么是BEM

BEM（Block, Element, Modifier） 是一种前端开发中常用的命名方法论，旨在提高代码的可维护性和可扩展性，自2012年BEM方法论开源以来，逐渐在全球范围内得到了广泛的应用和推广，专业的事，我们自然要用专业的方法。

• B 块 是指页面上的一个独立的、可重用的组件或者模块。块的命名基于其功能，而不是外观，是一个可以包含其他元素或修饰符的独立实体。

• E 元素 是块的一部分，不能独立存在且与块相关联。元素的命名以块名为前缀，使用双下划线来分隔块名和元素名。

• M 修饰符 用于修改块或元素的外观、状态或行为，使其具有不同的变体。修饰符的命名以块名或元素名为前缀，使用双连字符来分隔，并且附加描述修饰符的名称。 BEM的命名约定通常采用以下格式：

• .block：表示块的类名。

• .block__element：表示元素的类名，双下划线用于分隔块名和元素名。

• .block--modifier：表示块的修饰符，双连字符用于分隔块名和修饰符名。

• .block__element--modifier：表示元素的修饰符，同时也可使用双下划线和双连字符分隔块名、元素名和修饰符名。

小结

了解到了BEM含义及其用法，我们现在来小结思考一下:

• 使用BEM固然能够有助于我们理解程序，让我们的代码更具有可读性和可维护性，同时，不同块及其元素都不同，大大提高了代码的模块化和复用性。
• 我们运用时，需要分析个个模块之间的层级关系和属性，准确清晰地命名块、元素、修饰符，避免命名冲突和样式污染。
• 当然，我们也不必过于使用BEM，应该在其中寻找平衡，（在大型的、复杂的应用程序中，使用 BEM 可以更好地组织和管理代码），可不用（例如一些简单的页面只包含一些基本的块元素），也不必全用，用得好不如用的巧，。

小技巧（略作浏览即可）

在使用BEM命名时 我们也有一些常见的习惯如hd（head）、bd（body）、ft（foot） 等。 也有一些约定：

• 常见的块（Block）：

  • header：页面头部
  • footer：页面底部
  • sidebar：侧边栏
  • menu：菜单
  • button：按钮
  • modal：模态框
  • form：表单
  • card：卡片

• 常见的元素（Element）：

  • title：标题
  • subtitle：副标题
  • content：内容
  • icon：图标
  • link：链接
  • text：文本
  • input：输入框
  • label：标签
  • image：图片
  • list：列表

• 常见的修饰符（Modifier）：

  • large：大型的
  • small：小型的
  • active：活动的/选中的
  • disabled：禁用的
  • primary：主要的
  • secondary：次要的
  • success：成功的
  • error：错误的
  • warning：警告的

示例

我们来观察一下下面的代码

<div class="weui-cell">
  <div class="weui-cell__hd">
    <label class="weui-cell__hd-label">Name</label>
  </div>
  <div class="weui-cell__bd">
    <input class="weui-cell__bd-input" type="text" placeholder="Enter your name"/>
  </div>
</div>

这种方式完全遵循BEM命名法则，但可能显得冗长。相比之下，简化处理使得代码更简洁，更让人心旷神怡。

<div class="weui-cell">
  <div class="weui-cell__hd">
    <label class="weui-label">Name</label>
  </div>
  <div class="weui-cell__bd">
    <input class="weui-input" type="text" placeholder="Enter your name"/>
  </div>
</div>

实战

我们来观察一下这个页面，大家可以思考一下怎么完成

来逐级分析一下结构吧

• 顶级块：weui-form

这是整个表单的容器，作为顶级块（Block）。

html
<div class="weui-form">
    ...
</div>

• 表单主体：weui-form__bd

这是表单主体部分，作为块weui-form的一个元素（Element）。

html
<div class="weui-form__bd">
    ...
</div>

• 文本区域：weui-form__text-area

这是一个包含表单标题和描述的区域，作为weui-form__bd的子元素（Element）。

html
<div class="weui-form__text-area">
    <h2 class="weui-form__title">表单结构</h2>
    <div class="weui-form__desc">展示表单页面的信息结构样式, </div>
</div>

weui-form__title 和 weui-form__desc 是 weui-form__text-area 的子元素，分别表示标题和描述。

• 控制区域：weui-form__control-area

这是包含表单控件的区域，作为weui-form__bd的另一个子元素（Element）。

html
<div class="weui-form__control-area">
    ...
</div>

• 表单组：weui-cells__group weui-cells__group_form

这是一个表单控件组，具有两个类名：weui-cells__group（表示控件组）和 weui-cells__group_form（表示表单类型的控件组）。

html
<div class="weui-cells__group weui-cells__group_form">
    ...
</div>

• weui-cells__title 是一个块，用于表单组的标题。

• 表单单元：weui-cells

这是实际包含表单控件的容器。

html
<div class="weui-cells">
    ...
</div>

weui-cell weui-cell_active 是单个表单控件的容器，具有两个类名，weui-cell（表示控件）和 weui-cell_active（表示激活状态）。

• 表单底部：weui-form__ft

这是表单的底部区域，作为块weui-form的另一个元素（Element）。

html
<div class="weui-form__ft">
    ...
</div>

• 操作区域：weui-form__opr-area

这是包含表单操作按钮的区域。

html
复制代码
<div class="weui-form__opr-area">
    <a role="button" disabled="" aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips" wah-hotarea="touchend">确定</a>
</div>

weui-btn weui-btn_primary weui-btn_disabled 是按钮的类名，分别表示按钮（weui-btn）、主要按钮样式（weui-btn_primary）和禁用状态（weui-btn_disabled）。

• 额外区域：weui-form__extra-area

这是包含表单额外信息（如页脚）的区域。

html
<div class="weui-form__extra-area">
    <div class="weui-footer">
        ...
    </div>
</div>

weui-footer__links 和 weui-footer__link 是页脚链接部分的类名。

weui-footer__text 是页脚文本部分的类名。

总结

命名终归是为了让我们理解和操作，BEM方法论不仅是一种命名规范，更是一种前端开发的态度。老师曾说，习惯和自律是人与人之间差距的根本原因，我觉得我们应该去灵活地使用一些规范，不论是命名还是coding，为我们更好的接轨工作做好铺垫。

若有所获，可否留存”墨宝“ (╹▽╹)