官方文档：BEM

BEM：是 Block（块）、Element（元素）、Modifier（修饰符） 三个单词的缩写。是为了解决 CSS 全局命名冲突、样式覆盖、代码可读性差、团队协作规范不统一、大型项目维护成本高的问题而生

定义

块

定义：Block 是独立的、可复用的功能单元，是 BEM 的最小封装单元，不依赖任何上下文，在页面中可以单独存在、也可以嵌套在其他 Block 中

原则：Block 不应该设置影响自身布局的外部样式（如 margin、position），保证在任何场景下都能无差异复用

规则：

1. 全小写英文字母，多个单词使用单连字符- 连接
2. 命名必须描述组件的用途是什么，禁止描述外观 / 状态
3. 禁止使用 ID 选择器、标签选择器，仅使用类选择器

元素

定义：Element 是 Block 的内部组成部分，不能脱离所属的 Block 独立使用，仅在对应 Block 的上下文中才有意义，用于拆分 Block 的内部功能结构

原则：

1. 元素只能属于一个 Block，不能跨 Block 复用
2. 禁止元素的多层嵌套（block__elem1__elem2 是严重违规写法），无论 Block 内部 DOM 层级多深，元素都只与 Block 直接关联
3. 若内部结构过于复杂，优先将其拆分为新的独立 Block，而非嵌套元素

规则：

1. 固定格式：Block名称 + 双下划线__ + 元素名称
2. 元素名称全小写，多单词用单连字符-连接
3. 命名必须描述元素在 Block 中的角色 / 用途，禁止描述外观 / 状态

修饰符

定义：Modifier 是Block 或 Element 的外观、状态、行为的变体，用于修改组件的默认样式，非必须使用，仅在需要差异化样式时添加

原则：

1. 修饰符分为两种类型：
   1. 布尔型：表示状态是否生效，如 button--disabled、menu--open
   2. 键值型：表示变体的取值，如 button--size-s、card--theme-dark
2. 修饰符仅做样式覆盖，不重复书写 Block/Element 的基础样式
3. HTML 中必须同时书写基础类名 + 修饰符类名，不可单独使用修饰符

规则：

1. 块修饰符格式：Block名称 + 双连字符-- + 修饰符名称
2. 元素修饰符格式：Block名称__元素名称 + 双连字符-- + 修饰符名称
3. 命名必须描述外观、状态、行为，禁止描述用途
4. 修饰符不能脱离对应的 Block/Element 单独使用