modifier 必须锚定到具体 block 或 element 节点，否则会导致样式失效、js 定位错误、语义混乱及维护困难；它不是全局开关，而是描述特定组件的状态变体，脱离载体即破坏 bem 的语义契约。
Modifier 必须锚定到具体 Block 或 Element 节点
Modifier 的作用不是“全局开关”，而是描述某个具体组件的状态变体。写 button--disabled 没问题，但单独用 --disabled 或在没 button 类的节点上加它，就等于把状态和载体脱钩——CSS 不知道该改谁的样式，JS 也找不到对应逻辑上下文。
脱离 Block 的 Modifier 会导致样式失效或冲突
常见错误是复用修饰符名但忽略归属：card--compact 和 list--compact 是两个完全不同的修饰逻辑，前者可能缩略卡片内边距，后者可能折叠列表项高度。如果只写 --compact，工具链无法区分，CSS 优先级也会混乱。
-
button--loading依赖button提供的display: inline-flex和position: relative才能正确定位 loading 图标 -
form--vertical改变的是整个表单的布局流，若套在非form元素上（比如div），flex-direction: column可能不起效，因为父容器没设display: flex - SCSS 中误写
.--disabled { opacity: 0.5; }，结果所有带--disabled的类都套用同一套样式，完全违背 BEM 的作用域隔离原则
JS 初始化时 Modifier 常被用作查找依据
BEM 场景下，很多初始化逻辑靠类名定位目标节点，比如：
document.querySelectorAll('.button--loading')
如果 --loading 出现在非 button 节点上，这段代码就会漏掉真实目标，或者误操作无关元素。
- React 组件中用
useBem('button', { loading: true })生成button button--loading，确保 JS 行为与样式严格对齐 - 手动拼接类名时，漏掉基础 Block 类（如只写
button--loading不写button）会导致 CSS 继承链断裂，字体、颜色等基础样式丢失 - 第三方库（如 Ant Design）的按钮不支持
ant-btn--loading这种写法，因为它的 Modifier 是内置处理的，强行套用 BEM 规则反而破坏原逻辑
Modifier 独立使用往往暴露设计缺陷
当你发现多个地方都要用 input--with-icon，说明这个“带图标输入框”其实已具备独立语义——它不该是 input 的 Modifier，而该升为新 Block：icon-input。强行复用 Modifier，等于把不同业务场景硬塞进同一套状态命名里。
- 搜索框的
input--with-icon需要右侧 icon 可点击，登录页的同名 Modifier 却要求 icon 置灰不可点——这是两个不同 Block 的行为，不该共用 Modifier - 用
dialog--fullscreen没问题，但不能把--fullscreen拆出来给sidebar用，因为全屏逻辑和弹窗生命周期强绑定 - Modifier 名必须带明确语义后缀，
button--primary合法，button--p或button--1违反可读性，也容易在多人协作中产生歧义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
