form-field--invalid必须加在字段级容器（如<div class="form-field">）上，以统一驱动label、input、message等子元素样式与aria属性同步，避免挂载在input或form上导致语义错乱、无障碍失效或状态不同步。
错误提示必须和校验状态类挂载在同一个字段级容器上，否则 aria-describedby 指向失效、样式不同步、JS 切换逻辑散乱。
form-field--invalid 该加在哪一层 DOM 节点上
必须加在语义完整的字段容器上，比如 <div class="form-field form-field--invalid">。这个 div 是独立可复用的 Block，内部包含 label、input、error 等子节点。
常见错误现象：
-
form__input--error：修饰符加在input上，样式只能作用于自身，无法控制label颜色或下方error文案显隐 -
form--invalid：整个表单加状态，用户找不到具体出错字段 -
:invalid伪类直接驱动：空的required字段初始不触发，移动端 Safari 支持差
form-field__message 如何与 form-field--invalid 同步显隐
错误文案不是靠类名堆砌区分类型，而是由 form-field__message 的文本内容 + aria-describedby 指向共同决定。状态类只负责“是否显示”这一层控制。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- CSS 中写
.form-field--invalid .form-field__message { display: block; }，不依赖form-field__message--empty这类冗余修饰符 - JS 校验返回错误码后，动态更新
aria-describedby指向对应id，例如aria-describedby="field-email-error-format" - 禁止用
form-field--empty--format--domain这种多修饰符——CSS 权重失控、JS 切换爆炸、无障碍 ID 难映射
为什么不能同时用 form-field--invalid 和 form-field--valid
验证状态本质是三态：未校验、无效、有效。但 form-field--valid 极易引发语义误判和交互错乱。
典型问题：
- 用户刚输一个合法邮箱，JS 立即加
form-field--valid，但此时其他字段仍是空的，业务逻辑上它并不“有效” - 空字段在没获焦前就显示绿色边框，违背表单交互直觉
- 提交后因后端校验失败又跳红，造成信任错乱
正确做法是只保留 form-field--invalid 作为主动反馈类，由校验函数返回 false 时添加；返回 true 或 undefined 时移除。初始态靠默认样式或 form-field--touched 区分。
最容易被忽略的是：验证状态不是布尔值，而是多维度信号——字段类型、错误原因、用户是否已操作，这些都该由 JS 主动驱动、CSS 单一响应，而不是靠修饰符数量堆叠来表达。
