元素重复出现在多个上下文时应升为独立块，如status-badge；判断标准是脱离父块后能否无修改复用，能则为块，不能则为元素。
元素名重复出现在多个上下文里，就该拆成新块
当你发现某个「元素」在不同父级 Block 中反复出现，且语义一致、样式逻辑独立（比如 badge 出现在 user-card__badge、document-item__badge、notification-list__badge），说明它早已不是附属部分，而是具备复用能力的独立单元。这时候继续用 __ 命名，只会让类名膨胀、维护变重、样式逻辑耦合。
常见错误是硬套视觉层级：一个表格单元格里放个状态图标，写成 table-cell__status-icon；但这个图标其实在弹窗、侧边栏、表单验证中都出现——它本质就是 status-badge，应作为 Block 独立存在。
- 判断依据不是 DOM 深度，而是功能是否可脱离当前 Block 存活
- 新 Block 名必须全局唯一，建议加项目前缀，如
nc-status-badge - 旧引用处改用组合式写法：
user-card__action nc-status-badge nc-status-badge--success
元素只服务于单一 Block 的内部结构逻辑
真正合格的 Element，生命周期和语义完全绑定于它的 Block。比如 search-form__input、search-form__submit、search-form__suggestion-list —— 这些组件离开 search-form 就失去意义，也不该被其他 Block 复用。它们的样式、交互、DOM 结构都由 search-form 统一协调。
这类 Element 的命名必须满足：名称不含 Block 语义（search-form__form-input ❌）、不嵌套（search-form__input__icon ❌）、不越界（不能给它单独加 --large，而应加在 search-form--large 上）。
- Element 名称回答“这是什么”，不是“它长什么样”或“它在哪”
- SCSS 中只允许一层嵌套：
.search-form { &__input {} &__submit {} }，禁用&__input &__icon - 如果某个 Element 内部需要复杂状态管理（如带展开/收起、加载中、错误提示），大概率它已超纲，该升为 Block
Modifier 出现在多个 Block 的同类 Element 上，暗示该 Element 应独立
当你频繁写 card__title--warning、list-item__title--warning、modal-header__title--warning，说明 --warning 实际修饰的是「标题」这个概念本身，而非某块里的标题。这种跨 Block 的修饰一致性，暴露了 title 其实是通用语义单元，不该依附于任意 Block。
此时更合理的做法是定义 text-title Block，并用 text-title--warning 统一控制；原位置改为组合：card__header text-title text-title--warning。
- Modifier 不是样式快捷键，它是稳定状态的声明。跨 Block 复用同一 Modifier，等于承认该状态属于更上层抽象
- 避免用
__把语义压扁，比如把所有标题都塞进各自 Block 下，结果每个 Block 都要重复实现font-size、line-height、color逻辑 - Vue/React 中，若一个组件内多次
props.titleVariant映射到不同 Block 的 Element Modifier，就是强烈信号：该逻辑该抽离
BEM 最容易翻车的地方不在语法，而在 Block 边界的模糊——把视觉容器当 Block、把通用语义当 Element、把临时样式当 Modifier。真正在意复用性和隔离性的人，会反复问：这个东西删掉父级后，还能不能自己跑起来？如果答案是能，它就不该是 __，而该是独立的 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
