修饰符名应使用--disabled而非--blue，因需表达状态或变体而非视觉结果；必须绑定到具体块或元素上，如.button--small，不可抽离为通用工具类；js仅控制已定义修饰符的增删，不生成动态类名。
Modifier 名字该用 --disabled 还是 --blue？
修饰符名必须表达状态或可预期的变体，而不是视觉结果本身。用 --disabled 没问题，用 --blue 是错的——颜色属于主题系统或 CSS 自定义属性该管的事，不是 BEM 的职责。
常见错误是看到某处按钮背景蓝了，就随手写个 .button--blue，结果换主题时得全局搜替换，还容易和 .button--primary 冲突。
- ✅ 推荐用布尔型：
--disabled、--active、--hidden - ✅ 推荐用键值型：
--size-large、--theme-dark、--variant-outline - ❌ 避免描述性/模糊词：
--big、--top、--red、--mobile - ❌ 不要混搭语义：
--primary-blue这类组合既冗余又不可维护
修饰符该加在 block 上还是 element 上？
看它修饰的是谁：如果是整个组件的状态（比如整张卡片禁用），就挂 .card--disabled；如果是某个局部表现（比如标题文字变灰），就挂 .card__title--muted。
不能跨级修饰——.card--disabled__title 是非法写法，BEM 不支持这种语法，编译器或人眼都会懵。
- 块级修饰符只作用于块本身：
.search-form--compact - 元素级修饰符只作用于该元素：
.search-form__input--error - 多个修饰符可共存：
.button--primary--large，但前提是它们正交（比如尺寸和颜色不耦合） - 不要用修饰符替代 JS 状态逻辑：
--hidden应由 JS 控制增删，而不是写死在 HTML 里
为什么不能把 --small 当作通用尺寸工具类？
因为 BEM 的修饰符不是 Utility Class。--small 必须绑定到具体语义块或元素上，比如 .avatar--small 或 .tag__text--small，而不是抽成一个独立的 .small 类到处复用。
一旦脱离上下文，“小”就失去意义：小按钮？小标题？小图标？没人能从类名反推 DOM 结构和用途。
- 修饰符名必须和所属块/元素形成完整语义：
.button--small可读，.small不可读 - 如果多个块都需要“小号”，说明你可能漏了更上层的抽象，比如封装一个
.size-small主题变量，而非靠类名硬编码 - 过度使用尺寸修饰符会暴露设计系统缺陷：真正该收敛的是 token，不是类名
Modifier 和 JavaScript 状态怎么对齐？
JS 控制类名增删是最直接的方式，但关键是要保持命名一致性和边界清晰。比如点击后按钮进入加载态，应该加 .button--loading，而不是临时拼个 .button-is-loading。
容易忽略的一点是：修饰符不改变 DOM 结构。如果某个“变体”需要插入新标签、改属性或触发副作用，那它已经超出了 BEM 能力范围，该考虑拆新块或用其他机制处理。
- JS 只负责切换已定义好的修饰符类：
btn.classList.add('button--loading') - 避免运行时动态生成类名：
btn.className += `button--${state}`—— 这会让样式不可追溯 - 服务端渲染或 SSR 场景下，务必确保初始 HTML 已含正确修饰符，否则首屏会闪动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
