CSS中如何正确划分BEM的Block、Element和Modifier

Block是独立可复用的功能单元，须具业务语义且不依赖父容器；Element必须依附Block存在、禁嵌套、命名用双下划线连接；Modifier描述状态或变体，须语义化、不可绑定具体值、禁止替代结构。

Block 怎么识别：看它能不能独立复用

Block 是一个语义完整、功能自洽的 UI 单元，不依赖父容器就能存在。比如 .card、.header、.search-form，它们各自有明确边界和用途，能被复制粘贴到任意页面位置直接生效。

常见误判是把视觉分组当 Block —— 比如把整个 .main-content 区域当成 Block，但它只是容器，没具体功能；真正该拆的是里面的 .article-list、.sidebar-nav 这类可复用组件。

1. 判断标准：删掉它，页面其他部分是否还能正常工作？能 → 可能是 Block
2. 命名必须全小写，单词间用短横线（user-profile ✅，userProfile ❌）
3. 不要带层级暗示，.page-header 不如 .header —— “page” 是上下文，不是 Block 本身属性

Element 为什么不能单独用 class

Element 必须依附于 Block 存在，它没有独立语义。比如 .card__title、.card__footer，一旦脱离 .card 就失去意义，样式也可能失效。

错误写法：

—— 这里缺失了 Block 容器，CSS 选择器 .card__title 通常依赖 .card 的作用域或嵌套逻辑（即使实际没嵌套，BEM 理念也要求语义绑定）。

1. Element 名称描述“它是什么”，不是“它看起来怎样” —— .card__close-btn ✅，.card__red-btn ❌（颜色应由 Modifier 控制）
2. 双下划线 __ 是硬性分隔符，不能写成 .card_title 或 .card-element-title
3. 避免深层嵌套 Element：.card__body__paragraph__link 是反模式，应拆成 .card__body + .paragraph（新 Block）

Modifier 什么时候该加 --，什么时候不该加

Modifier 表示状态或变体，必须和 Block 或 Element 绑定使用，永远不单独出现。它的核心作用是“开关式变更”，不是“新增样式”。

典型错误：给 .button 加 .button--primary 同时又写 .button--large，但没在 HTML 中同时应用两个类 —— 结果按钮尺寸没变，只改了颜色。BEM 要求状态类显式叠加。

1. 块级 Modifier：.button--disabled、.menu--fixed
2. 元素级 Modifier：.card__title--highlighted、.form-input--error
3. 禁止用 Modifier 替代结构：不要用 .list--horizontal 代替 .list + .list__item 布局，那是 display 层面的事，应交由工具类或 CSS Grid/Flex 控制
4. 状态类要可预测：比如 --active 应始终表示“当前激活”，不能在 Tab 组件里表示选中，在 Button 里表示 hover

BEM 类名组合容易漏掉的关键细节

真实项目里最常出问题的不是命名规则本身，而是组合时的隐含约束。比如 .card__content--collapsed 看似合规，但如果 .card__content 本身没定义基础样式（padding、font-size 等），这个 Modifier 就成了空中楼阁。

另一个高频坑：用 Sass 写嵌套时，习惯性写出 .card { &__title { ... } &--highlighted { ... } }，这没问题；但若写成 .card { &__title { &--large { ... } } }，就违背了 BEM 原则 —— 元素的 Modifier 应直接挂在元素上，而不是嵌套在元素内部。

1. HTML 中必须同时存在 Block 和 Element 才能用 Element Modifier：
   ...
2. Modifier 类名长度不是问题，但语义必须精确：.input--has-error 比 .input--error 更清晰，因为后者可能被误解为“输入框本身出错”
3. 多人协作时，建议用 ESLint 插件 stylelint-selector-bem-pattern 检查类名，比人工 review 可靠得多