表单根元素不应承担样式职责，所有视觉逻辑必须下沉到带业务语义的独立字段block（如field-email）中，以保障校验精准性、复用性、无障碍支持及移动端兼容性。
直接重构表单 CSS 时，form 根元素不该承担任何样式职责；所有视觉逻辑必须下沉到字段级 field-email、field-password 这类独立 block 中，否则校验态无法精准控制、复用成本高、无障碍支持天然缺失。
为什么不能把 input 和 label 直接挂到 form 下
常见错误是写成 form__label + form__input，看似结构清晰，实则破坏了字段的自治性：
-
form__input--error这种修饰符一旦被 JS 动态添加，就只能靠 class 字符串拼接来管理，容易漏加、重复、顺序错乱 - 空值校验、邮箱格式、密码强度等不同规则无法共存——你没法同时表达“空 + 格式错”，
form__input--empty--invalid是反模式 - 屏幕阅读器依赖
for/id显式绑定，而form__input的id值若不与语义对齐（如user-form__email），aria-describedby就无法指向正确错误文案 - 移动端 Safari 对
:user-invalid支持极差，纯伪类方案不可靠，必须由 JS 主动切换 block 级状态
每个字段必须封装为独立 block，且命名带业务语义
不要用 form-item 或 input-field 这类泛化名，它会让后续扩展和定位变得模糊：
- 正确示例：
field-email、field-phone、field-terms-agreement—— 名字本身说明“这是什么字段” - 所有子元素必须严格归属该 block：
field-email__label、field-email__input、field-email__error，禁止跨层如field-email__input__icon - 修饰符只作用于 block 根节点：
field-email--invalid、field-email--required、field-email--disabled，CSS 中统一控制内部子元素样式 - JS 控制只需操作一个 class：
fieldEl.classList.toggle('field-email--invalid', !isValid)，无需遍历或拼接多个类名
label 与 input 的 DOM 关系必须显式可验证
BEM 不是字符串游戏，它要和 HTML 结构对齐，否则自动化工具、无障碍检测、甚至 :focus-within 都会失效：
立即学习“前端免费学习笔记（深入）”；
- 推荐方式一（显式
for/id）：<label for="field-email__input">邮箱</label>+<input id="field-email__input" class="field-email__input">——id必须与__input后缀一致 - 推荐方式二（嵌套结构）：
<label class="field-email__label">邮箱<input class="field-email__input"></label>，但前提是整个结构包裹在<div class="field-email">内，否则 BEM 上下文丢失 - 禁止混用：一半用
for，一半嵌套，会导致 axe、Lighthouse 等工具无法识别控件关系 - 所有状态修饰符必须同步更新 ARIA 属性：
field-email--invalid→aria-invalid="true"+aria-describedby="field-email__error"
校验态修饰符必须单一、互斥、可组合
别堆砌 --error --touched --required --loading，CSS 选择器权重失控，JS 逻辑也难维护：
- 最终状态由校验函数统一返回，例如：
const state = validateEmail(value)→ 返回'valid'/'empty'/'invalid'/'pending' - 只用一个修饰符映射该状态：
field-email--empty、field-email--invalid，避免field-email--error这种模糊词 - 允许组合但不耦合：
field-email--required field-email--invalid是合法的，但 CSS 规则里应写成.field-email--required.field-email--invalid .field-email__input，而非.field-email--required--invalid - 初始空状态也要主动标记：
field-email--empty，因为:invalid在未输入时不会触发，纯 CSS 无法覆盖这个 UX 要求
最易被忽略的是：字段 block 的容器必须是真实 DOM 节点，不能靠 display: contents 或 visibility: hidden 模拟；否则 screen reader 会跳过整个字段，BEM 类名再规范也没用。
