modifier必须是语义化状态声明而非样式快照，应使用--disabled等布尔型或--size-large等键值型，禁用--blue等描述性词；须依附于block或element单独书写，禁止连缀如btn--primary--loading。
Modifier不是样式开关，而是语义化状态声明——写错一个--blue，后续换主题时就得全局搜索替换，还可能和--primary冲突。
Modifier该用--disabled还是--blue？
必须用--disabled，禁用--blue。颜色是主题系统或 CSS 自定义属性该管的事，BEM 的 Modifier 只负责表达可预期的状态或变体。
- ✅ 推荐布尔型：
--disabled、--active、--hidden - ✅ 推荐键值型：
--size-large、--theme-dark、--variant-outline - ❌ 避免描述性词：
--big、--red、--mobile - ❌ 禁止混搭语义：
--primary-blue既冗余又不可维护
常见错误是看到按钮背景蓝了，就随手加个.button--blue，结果设计师说“品牌色要换成紫色”，你得翻遍所有模板、JS 逻辑、测试用例去改。
Modifier该加在Block上还是Element上？
看它修饰的是谁：整块组件的状态（如卡片禁用）就挂.card--disabled；局部表现（如标题文字变灰）就挂.card__title--muted。
- 块级修饰符只作用于块本身：
.search-form--compact - 元素级修饰符只作用于该元素：
.search-form__input--error - 禁止跨级写法：
.card--disabled__title非法，BEM 不支持，选择器会失效 - JS 操作时，必须确保目标元素存在且类名精确匹配，否则容易触发
Cannot read property 'classList' of null
多个Modifier能连写吗？比如btn--primary--loading？
不能连写，必须独立书写：btn btn--primary btn--loading。连缀写法看似省事，实则破坏 BEM 的原子性和组合能力。
- ✅ 正确组合：
<button class="btn btn--primary btn--disabled"></button> - ❌ 错误合并：
<button class="btn--primary-disabled"></button> - SCSS 中避免用
@each自动生成btn--primary-loading这类类名——这等于放弃命名的可预测性 - React 中若用
classnames，应统一基于 Block 名派生，别让 JSX 里散落多个字符串拼接逻辑
Modifier 不是工具类，也不响应视口变化。写 .nav--mobile 是典型误区——响应式行为该由媒体查询控制已有类名，或由 JS 监听 resize 后切换 nav--is-mobile 这类语义明确的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
