form__field 应为 Block，form__input、form__label、form__error 均为其 Element；因表单最小交互单元是包含标签、控件、提示的整体容器，而非 input 本身。
form__input 和 form__field 到底谁该是 Block？
表单里最常混淆的是“输入框”和“表单域”的归属关系。正确做法是：form__field 作为 Block，form__input、form__label、form__error 全部是它的 Element。因为一个可交互的最小单元不是 input 标签本身，而是包含标签、输入控件、提示/错误信息的整体容器。
常见错误：
- 把
input当成独立 Block，写成input__icon或input--disabled—— 这会让图标、验证状态无法与 label 同步响应 - 用
form-input（单短横）替代form__input—— 工具链无法识别为 BEM 元素，VS Code 补全失效，CI 中 stylelint 会漏检 - 在 HTML 里只给子元素加类，比如
<input class="form__input">却没给外层容器加form__field—— JS 查询.form__field时会漏节点，状态控制断裂
验证失败样式该挂 --error 还是 --email-format-invalid？
别用泛泛的 form__field--error。它看起来省事，但实际项目中，“错误”的视觉反馈必须区分字段类型和错误原因：密码强度不足、邮箱格式错、必填项为空，它们的 UI 表现完全不同。
实操建议：
- 基础状态类只管共性：比如
form__field--invalid统一设红边框过渡 - 具体错误用复合修饰符：如
form__field--email--invalid-format、form__field--password--weak，各自控制图标、辅助文本、背景等 - 务必让 BEM 类优先级高于
:invalid伪类：不要写.form__field:invalid { border-color: red; }，而要写.form__field--invalid { border-color: #d32f2f; }，否则 JS 添加状态类后可能被伪类覆盖
图标、清除按钮这些“附属控件”怎么命名才不嵌套？
禁止出现 form__input__icon 或 form__input__clear —— BEM 明确不允许 Element 嵌套 Element。图标和清除按钮不是 input 的子部件，而是同级功能单元，应与 form__input 并列存在于 form__field 内。
正确结构示例：
<div class="form__field">
<label class="form__label">邮箱</label>
<div class="form__control">
<input class="form__input" type="email"><span class="form__icon form__icon--email"></span>
<button class="form__clear"></button>
</div>
<span class="form__error"></span>
</div>
这样做的好处：
-
form__icon--loading可独立切换，不依赖 input 是否聚焦 - 清除按钮点击后只需加
form__clear--visible，不影响form__input状态 - 抽离为通用组件时，
form__icon可复用于搜索框、密码显示等场景，无需重写样式
SCSS 里怎么写才不生成后代选择器？
SCSS 嵌套空格会直接产出 .form__field .form__input 这类后代选择器，破坏 BEM 封装性。必须只用 &__ 和 &-- 拼接语法。
危险写法（编译后失效）：
.form__field {
.form__input { /* ❌ 编译为 .form__field .form__input */ }
}
正确写法（平铺 + & 引用）：
.form__field {
&__input {
padding: 8px 12px;
}
&__label {
font-weight: 600;
}
&--disabled &__input {
background: #f5f5f5;
}
}
注意：&--disabled &__input 是合法的，因为修饰符作用于 Block，影响其内部 Element；但 &__input &__icon 是非法的 —— 元素之间不能有父子关系。
真正容易被忽略的是媒体查询和伪类的写法：&__input:hover 正确，&__input:hover &__icon 错误；需要控制 hover 下的图标，应改用 &__input--hover &__icon 并由 JS 同步添加类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
