大厂必备知识---BEM 国际命名规范BEM（Block, Element, Modifier 是一种流行的 CSS 命

前言

BEM（Block, Element, Modifier 是一种流行的 CSS 命名规范，旨在提高代码的可维护性、可扩展性和协作效率。它通过清晰的命名规则和模块化的设计理念，帮助开发者构建可复用的 UI 组件。

下面，本文将结合WEUI项目实例，详细解析 BEM 的核心概念，并展示其在实际开发中的应用。

BEM 的核心概念

BEM 将 CSS 类名划分为三部分：Block（块）、Element（元素） 和 Modifier（修饰符）。它们共同构成了一种层次化的命名体系，确保代码结构清晰且易于管理。

一、Block（块）

定义：
Block 是独立的、可复用的 UI 组件，代表一个完整的功能模块。Block 通常是页面中的一个独立部分，例如按钮、表单、导航栏等。

命名规则：

使用连字符（-）分隔单词。
格式：project-blockname，（项目 - 块名）。

代码示例：

<!-- Block: 按钮 -->
<button class="weui-btn">默认按钮</button>

<!-- Block: 表单 -->
<div class="weui-form">
  <input type="text">
</div>

说明：

.weui-btn 是一个独立的按钮组件（Block），可以直接在不同页面中复用。
.weui-form 是一个表单组件（Block），包含输入框等子元素，也可以在不同页面中复用。

二、Element（元素）

定义：
Element 是 Block 的组成部分，不能独立存在，必须依附于 Block。

Element 是 Block 内部的子元素，用于描述 Block 的具体部分。

命名规则：

使用双下划线（__）连接 Block 名称和 Element 名称。
格式：blockname__elementname。

代码示例：

<!-- Block: 页面 -->
<div class="weui-page">
  <!-- Element: 页面头部 -->
  <header class="weui-page__header">
    <h1 class="weui-page__title">标题</h1>
    <p class="weui-page__desc">描述文字</p>
  </header>
  
  <!-- Element: 页面主体 -->
  <main class="weui-page__body">
    <div class="weui-cell">
      <div class="weui-cell__hd"><img src="..." alt=""></div>
      <div class="weui-cell__bd">标题内容</div>
      <div class="weui-cell__ft">说明文字</div>
    </div>
  </main>
</div>

说明：

weui-page__header 是 weui-page 的子元素，表示页面的头部区域，如果没有weui-page，header也没有意义。
weui-cell__hd、weui-cell__bd、weui-cell__ft 是 weui-cell 的子元素，分别表示单元格的头部、主体和尾部。

三、Modifier（修饰符）

定义：
Modifier 用于描述 Block 或 Element 的状态或变体，例如颜色、尺寸、禁用状态等。

Modifier 可以通过添加额外的类名来改变 Block 或 Element 的样式。

命名规则：

使用单下划线（_）连接 Block/Element 名称和 Modifier 名称。
格式：blockname_modifiername 或 blockname__elementname_modifiername。

代码示例：

<!-- Block: 按钮（不同状态） -->
<button class="weui-btn weui-btn_primary">主要操作</button>
<button class="weui-btn weui-btn_default">次要操作</button>

<!-- Element: 表单输入框（不同状态） -->
<div class="weui-form">
  <input type="text" class="weui-input weui-input_error" placeholder="错误状态">
</div>

说明：

weui-btn_primary 和 weui-btn_default 是 weui-btn 的修饰符，分别表示按钮的不同样式。
weui-input_error 是 weui-input 的修饰符，用于标记输入框的错误状态。

四、BEM 的优势

代码可维护性：
BEM 的命名规则使代码结构清晰，开发者可以快速定位和修改特定部分。
组件可复用性：
Block 的独立性使其可以在不同项目中复用，减少重复代码。
协作效率：
标准化的命名规则降低了团队协作的沟通成本，避免类名冲突。
可扩展性：
通过 Modifier 可以灵活地扩展 Block 的样式，适应不同的业务需求。

五、总结

分类	定义	命名规则	代码示例	说明
Block（块）	独立的、可复用的 UI 组件，代表一个完整的功能模块。	`项目名-块名` `projectname-blockname`	`.weui-page` `.tm-page` `.jd-page` `.weui-btn`	Block 是页面中的独立组件，如页面容器、按钮、表单等。
Element（元素）	Block 的组成部分，不能独立存在，必须依附于 Block。	`块名__元素名` `blockname__elementname`	`.page__header` `.page__title` `.cell__hd` `.form__hd`	Element 是 Block 的子元素，描述其内部结构或功能。
Modifier（修饰符）	描述 Block 或 Element 的状态或变体（如颜色、尺寸、禁用状态）。	`块名/元素名_修饰符名` `blockname_modifiername` `blockname__elementname_modifiername`	`.btn_primary` `.btn_default` `.input_error`	Modifier 用于扩展 Block 或 Element 的样式，表示不同状态或变体。

BEM 命名规范通过 Block、Element 和 Modifier 的层次化设计，为前端开发提供了一种高效、可扩展的解决方案，BEM 不仅提升了代码的可读性，还显著增强了组件的复用性和可维护性。