bem修饰符是标记组件状态或变体的命名后缀，用双中划线--分隔（如button--disabled），因单中划线-专用于单词连接，双中划线--是规范唯一标识，避免语义混淆与层级冲突。
什么是BEM修饰符，为什么用双中划线（--）而不是单中划线（-）
BEM修饰符是用于标记组件状态或变体的命名后缀，比如按钮的禁用、成功、加载中等视觉差异。它必须紧接在元素名之后，用双中划线 -- 分隔，例如 button--disabled 或 card--hovered。不用单中划线是因为 BEM 规范明确区分：单中划线 - 仅用于单词连接（如 user-profile），而双中划线 -- 是修饰符的唯一合法标识符——混用会导致语义混乱，也容易和块/元素层级冲突。
- 单中划线写成
button-disabled会被误判为一个新块，破坏 BEM 层级可读性 - 修饰符不可嵌套，
button--primary--disabled是非法写法；应选互斥值或组合类（如同时加button--primary button--disabled） - 修饰符不改变 DOM 结构，只通过 CSS 控制样式，因此必须确保对应 HTML 确实添加了该 class
如何给同一组件绑定多个互斥状态（如 primary / secondary / danger）
这类状态通常是单选的，靠 class 切换来控制外观。关键在于 CSS 中用独立规则覆盖基础样式，而非依赖顺序或权重堆砌。
.button { padding: 8px 16px; border: none; }
.button--primary { background: #007bff; color: white; }
.button--secondary { background: #6c757d; color: white; }
.button--danger { background: #dc3545; color: white; }
- 所有修饰符规则应与基础类同级声明，避免用
.button .button--primary这种后代选择器（会降低 specificity 且违背 BEM 原则） - 不要试图用
:not()或 JS 动态移除其他修饰符——由调用方保证互斥，CSS 只负责定义每个状态长什么样 - 若需默认态（如未设任何修饰符时显示中性色），就在
.button基础类里写，不要留空
如何支持复合状态（如 disabled + loading）并避免样式冲突
复合状态不是靠一个修饰符实现，而是多个修饰符并列添加到同一个元素上，CSS 利用组合选择器精准命中：
.button--disabled { opacity: 0.5; cursor: not-allowed; }
.button--loading::after { content: "…"; margin-left: 4px; }
.button--disabled.button--loading { pointer-events: none; }
- HTML 必须写成
<button class="button button--disabled button--loading"></button>，两个修饰符平级并存 - 组合选择器（如
.button--disabled.button--loading）优先级高于单修饰符，适合覆盖特殊交集行为 - 避免写
.button--disabled .button--loading（后代选择器），这要求 DOM 嵌套，违反 BEM 元素扁平化原则
BEM修饰符在真实项目中的维护陷阱
最常被忽略的是修饰符语义漂移：同一个 --large 在按钮上表示尺寸，在输入框上却变成高度+内边距，最终导致团队理解不一致。解决方式很实际：
- 所有修饰符必须在项目文档或 CSS 注释里明确定义作用域，例如
/<em> --large: only for button & card, affects padding + font-size </em>/ - 不要跨组件复用修饰符名，
modal--large和button--large应该是两套独立规则，哪怕表现相似 - 构建时可用 PostCSS 插件校验修饰符命名格式，拦截
button-disabled这类错误写法
双中划线不是语法糖，它是 BEM 中「状态即契约」的视觉锚点——改一个 -- 就可能让整个组件的状态逻辑失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
