modifier应使用--disabled而非--blue，因需表达状态或可预期变体而非视觉结果；必须绑定到具体块或元素上，如.card--disabled或.card__title--muted，不可跨级或抽离为通用类。
Modifier 名该用 --disabled 还是 --blue？
用 --disabled 没问题，用 --blue 是错的。BEM 的 Modifier 必须表达组件的状态或可预期变体，而不是视觉结果本身。颜色属于主题系统或 CSS 自定义属性该管的事。
-
--disabled、--active、--hidden是布尔型，语义清晰、可预测 -
--size-large、--theme-dark、--variant-outline是键值型，明确区分维度 - 避免
--big、--red、--mobile：模糊、不可维护、易与设计变更脱节 - 禁止混搭：
--primary-blue既冗余又耦合，换色方案时得批量重命名
Modifier 该加在 Block 上还是 Element 上？
看它修饰的是谁——不是看“写起来顺不顺”，而是看语义归属。
- 整个组件状态（如整张卡片禁用）→ 加在 Block 上：
.card--disabled - 局部表现变化（如标题文字变灰）→ 加在 Element 上：
.card__title--muted - 不允许跨级：
.card--disabled__title是非法写法，BEM 不支持，选择器会失效 - 块级修饰符只影响块自身样式；元素级修饰符只作用于该元素，不传递、不继承
多个 Modifier 共存时怎么写？
必须独立书写，禁止连缀或缩写。
- ✅ 正确：
btn btn--primary btn--loading btn--small - ❌ 错误：
btn--primary-loading-small或btn--primary-loading - 连缀类名破坏 BEM 的原子性，丧失组合灵活性，也阻碍 JS 条件拼接（比如用
classnames动态控制） - 多个 Modifier 可共存的前提是正交：尺寸（
--size-large）和状态（--disabled）不耦合；但--size-large和--height-tall就冲突
为什么不能把 --small 当作通用工具类？
因为 BEM 的 Modifier 不是 Utility Class，它必须绑定到具体语义单元。
-
.avatar--small✅ 合理：尺寸是 avatar 这个组件的固有变体 -
.tag__text--small✅ 合理：描述该文本在 tag 中的呈现意图 -
.small❌ 错误：抽离成全局工具类，等于放弃 BEM 的模块隔离性 - 一旦抽成工具类，就无法回答“这个 small 在什么上下文中生效？”——CSS 体积没变，但团队沟通成本和重构风险陡增
复杂点在于：Modifier 的语义粒度要和设计系统对齐。设计师说“按钮变小”，开发不能直接写 --small，得确认这是“紧凑布局”（--compact）、“图标按钮”（--icon-only），还是“表单内嵌按钮”（--inline）。名字一旦定错，后续改设计就得改类名、改 JS、改文档——所有地方都得动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
