必须用 input-group__prefix。它是与 input-group__input、input-group__suffix 同级的结构元素，符合 bem 元素直属于块的规则，避免嵌套误判、purgecss 误删、样式权重升高及 js 逻辑错位。
前置图标该用 input-group__icon--prefix 还是 input-group__prefix？
必须用 input-group<strong>prefix</strong>。图标本身不是“图标块”的变体，而是输入组的结构组成部分——它和 input-groupinput、input-group<strong>suffix</strong> 是同级元素，共同构成一个功能完整的输入容器。用 input-groupicon--prefix 会把“图标”错误地升格为独立 block，导致：
- 后续加状态（如 loading）时变成
input-group__icon--prefix--loading，违反修饰符单层原则 - 图标无法复用于非 input 场景（比如按钮前缀），因为它被绑死在“icon”语义里
- VS Code 的 BEM 插件无法识别
input-group<strong>icon</strong>为合法元素名（它只匹配blockelement格式，不接受带 -- 的中间段）
为什么不能把前后置元素写成 input-group__input__prefix？
这是典型嵌套误判。input-group<strong>input</strong>prefix 违反 BEM 最基本约束：元素只能直属块，不可嵌套元素。实际 DOM 中，前后置内容和 input 是兄弟关系，不是父子关系：
<div class="input-group"> <span class="input-group__prefix"></span> <input class="input-group__input"><button class="input-group__suffix"></button> </div>
写成 input-group<strong>input</strong>prefix 会带来三个硬伤：
- PurgeCSS 构建时大概率误删该类（它不匹配标准 BEM 模式）
- CSS 选择器权重被迫升高（如
.input-group<strong>input</strong>prefix需要覆盖原生 input 样式） - JS 控制显隐时逻辑错位：本该切换
input-group--has-prefix，却去操作一个不存在的子元素类
input-group__prefix 和 input-group__suffix 的样式怎么隔离定位？
绝对定位不是问题，关键是谁提供定位上下文。不要给 input-group__input 加 position: relative，而应在块层级显式声明：
.input-group--position-context {
position: relative;
}
然后让前后置元素依赖它定位：
.input-group__prefix {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.input-group__suffix {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
这样做的好处：
- JS 可通过
el.classList.contains('input-group--position-context')安全判断是否具备定位能力 - 避免后代选择器耦合（如不用
.input-group .input-group__prefix） - 多个输入组共存时，不会因祖先
position: relative错乱叠加 z-index
前后置元素需要交互状态时，修饰符挂哪？
挂自身，不挂 input 或 group。比如清空按钮点击态、密码显示切换态、加载中图标：
-
input-group__suffix--active（按钮按下） -
input-group__suffix--loading（旋转图标） -
input-group__prefix--valid（校验成功图标）
不能写成 input-group__input--has-suffix 或 input-group--has-suffix，因为：
- 前者把状态责任转嫁给 input，但 suffix 状态变化时 input 本身可能完全没变
- 后者模糊了控制边界：
input-group--has-suffix是布局描述，而input-group__suffix--loading是真实可交互状态，二者语义不同、生命周期不同、JS 切换时机也不同
真正容易被忽略的是：前后置元素一旦具备独立交互能力（比如点击触发搜索、切换密码可见），它就不再是“装饰”，而是一个完整 block ——这时应直接抽离为 clear-button、toggle-password，而非强行塞进 input-group 命名空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
