BEM是约束CSS作用域边界的协作协议，通过块（Block）、元素（Element）、修饰符（Modifier）三部分及双下划线__、双短横--命名规范，确保类名可反推DOM结构与意图，明确组件边界与职责。
什么是BEM，为什么不能直接套用类名
BEM不是语法糖，是约束CSS作用域边界的协作协议。你写.header没问题，但团队里有人补一句.header__logo--dark，另一人却写.header-logo-dark，后续维护时根本分不清这是同一套逻辑还是两套混用。BEM强制用双下划线__分隔块与元素、双短横--分隔修饰符，目的就是让类名本身能反推DOM结构和意图。它不解决样式复用问题，只解决“看到类名就知道它属于谁、起什么作用、有没有变体”这件事。
块（Block）必须是独立可复用的容器
块不是“大盒子”，而是有明确边界和职责的UI单元。比如card、modal、input-group，它们可以单独存在、被复用、不依赖父级上下文。
- card合法，user-card也合法（语义清晰），但homepage-card不推荐——它绑定了页面位置，破坏了块的独立性
- 块名不能带状态或视觉描述，如big-card或red-button，这类信息应该交给修饰符处理
- 一个块对应一个CSS文件（如card.css），所有相关样式都收在里面，不散落
元素（Element）必须用__连接，且不能脱离块单独使用
元素是块的组成部分，不具备独立意义。写card__title可以，但绝不能只写title或card-title。
- 元素名要语义化，避免card__left这种位置描述，改用card__avatar或card__content
- 元素不能嵌套元素：禁止card__title__icon，应改为card__title-icon（作为card__title的修饰符）或提升为card__icon（如果它在块层级上确实平等）
- BEM不强制DOM嵌套深度匹配命名层级，但建议保持一致；否则card__footer出现在<div class="card"><footer class="card__footer"></footer></div>里就比藏在三层数字节点里更易理解
修饰符（Modifier）要表达“变化”，不是“新增”
修饰符描述块或元素的**状态、主题、尺寸等差异**，不是加新功能。比如button--disabled、card--horizontal、input-group--compact。
- 修饰符必须和块或元素一起出现：button button--disabled，不能单独用button--disabled
- 避免修饰符叠加歧义：不要写button--primary--large，改用button button--primary button--large（多个独立修饰符）
- CSS中修饰符样式应基于对应块/元素声明，而不是重新定义全部样式。例如.card--horizontal .card__content不如直接写.card--horizontal .card__content配合flex-direction微调，而非重写整个card__content盒模型
card、modal、input-group，它们可以单独存在、被复用、不依赖父级上下文。
- card合法，user-card也合法（语义清晰），但homepage-card不推荐——它绑定了页面位置，破坏了块的独立性
- 块名不能带状态或视觉描述，如big-card或red-button，这类信息应该交给修饰符处理
- 一个块对应一个CSS文件（如card.css），所有相关样式都收在里面，不散落
元素（Element）必须用__连接，且不能脱离块单独使用
元素是块的组成部分，不具备独立意义。写card__title可以，但绝不能只写title或card-title。
- 元素名要语义化，避免card__left这种位置描述，改用card__avatar或card__content
- 元素不能嵌套元素：禁止card__title__icon，应改为card__title-icon（作为card__title的修饰符）或提升为card__icon（如果它在块层级上确实平等）
- BEM不强制DOM嵌套深度匹配命名层级，但建议保持一致；否则card__footer出现在<div class="card"><footer class="card__footer"></footer></div>里就比藏在三层数字节点里更易理解
修饰符（Modifier）要表达“变化”，不是“新增”
修饰符描述块或元素的**状态、主题、尺寸等差异**，不是加新功能。比如button--disabled、card--horizontal、input-group--compact。
- 修饰符必须和块或元素一起出现：button button--disabled，不能单独用button--disabled
- 避免修饰符叠加歧义：不要写button--primary--large，改用button button--primary button--large（多个独立修饰符）
- CSS中修饰符样式应基于对应块/元素声明，而不是重新定义全部样式。例如.card--horizontal .card__content不如直接写.card--horizontal .card__content配合flex-direction微调，而非重写整个card__content盒模型
button--disabled、card--horizontal、input-group--compact。
- 修饰符必须和块或元素一起出现：button button--disabled，不能单独用button--disabled
- 避免修饰符叠加歧义：不要写button--primary--large，改用button button--primary button--large（多个独立修饰符）
- CSS中修饰符样式应基于对应块/元素声明，而不是重新定义全部样式。例如.card--horizontal .card__content不如直接写.card--horizontal .card__content配合flex-direction微调，而非重写整个card__content盒模型
BEM最难的部分不在规则本身，而在于每次写类名前得停下来想：“这个东西，离开它所属的块还能不能成立？”——多数人卡在这里，不是不会写__和--，是没想清楚组件边界。
