modifier必须绑定到具体element，不能脱离search-form__input或search-form__button存在；它是宿主元素的临时状态变体，需语义明确、可组合、独立存在，禁止挂错宿主或连缀命名。
Modifier必须绑定到具体Element，不能脱离search-form__input或search-form__button存在
很多人写search-form--focused，以为聚焦是整个表单的状态——但实际焦点只落在search-form__input上。BEM里Modifier不是“功能开关”，而是“某个实体的临时变体”。一旦脱离宿主，类名就失去语义锚点，JS查不到、CSS不生效、测试断言失败。
常见错误现象：search-form--has-value被加在form标签上，但清空逻辑却只操作search-form__input的value；结果JS删了值，类名还挂着，状态错位。
-
search-form__input--focused✅ 表示输入框当前获得焦点 -
search-form__input--empty✅ 输入为空时的视觉反馈（比如 placeholder 显现、边框变浅） -
search-form__input--loading✅ 搜索请求进行中，禁用输入并显示加载指示 - 禁止
search-form--loading❌ 没有明确宿主，无法判断是按钮禁用、输入锁定，还是建议列表在加载
状态类名要描述意图，而不是样式结果
写search-form__input--border-red看似直观，但设计改版后边框可能变成阴影或图标变色，类名就成谎言。Modifier应表达用户能感知的行为或系统状态。
使用场景差异明显：表单控件适合状态型命名（--error / --valid / --disabled），而布局类倾向意图型（--compact / --inline）。
-
search-form__input--error✅ 用户输错格式，提示校验失败 -
search-form__input--disabled✅ 后端返回维护中，整个输入不可操作 -
search-form__button--submitting✅ 提交中，按钮文字变“搜索中…”且不可再点 - 避免
search-form__button--gray❌ 颜色是实现细节，不是状态本质
多个Modifier共存必须独立书写，禁止连缀或嵌套
一个输入框可能同时处于聚焦、有值、带错误的状态。BEM要求这些Modifier原子化、可组合、不耦合。连写成search-form__input--focused--error或search-form__input--focused-error，会破坏选择器可预测性，也阻碍JS动态增删。
性能影响不大，但协作成本飙升：新人看到--focused-error会困惑这是新状态，还是两个状态的组合？要不要单独写CSS？测试怎么覆盖？
- 正确写法：
class="search-form__input search-form__input--focused search-form__input--error" - JS操作推荐：
inputEl.classList.add('search-form__input--error')，不拼字符串 - 测试断言必须同步检查基础类：
expect(el).toHaveClass('search-form__input', 'search-form__input--error') - 禁止Sass循环生成
.search-form__input--#{ $state }再手动拼接类名——这等于放弃BEM契约
清空按钮状态必须由自身控制，不依赖父级类名传递
清空按钮（search-form__button--clear）的显隐、禁用、加载态，都应通过它自己的Modifier表达，而不是靠search-form--has-value这种父级类来驱动显示逻辑。
原因很直接：JS控制清空按钮时，只需关注按钮本身是否该显示、是否可点；如果还要去读父级有没有--has-value，就引入了不必要的DOM依赖和状态同步风险。
-
search-form__button--clear✅ 默认隐藏，有值时显示 -
search-form__button--clear--visible✅ 与search-form__input--empty互斥，JS切换时只操作这个类 -
search-form__button--clear--loading✅ 清空请求发送中，按钮进入加载态 - 禁止
search-form__button--clear-visible❌ 缺双短横，会被解析为Element；也禁止search-form--clear-visible❌ Modifier挂错宿主
classList.toggle操作类名，就必须确保每个Modifier都有明确宿主、唯一语义、可独立存在——否则JS逻辑、CSS样式、测试断言三者就会在某次重构后悄然脱节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
