应使用 --error 而非 --invalid，优先修饰 form__field 而非 form__input，并确保 CSS 作用域隔离与 JS 时机正确。--error 表达用户可感知的错误态，统一覆盖各类错误来源；form__field--error 才能完整控制字段容器的视觉反馈；所有 --error 样式须限定在修饰符内声明，JS 添加前需确保 DOM 挂载并清除旧态。
错误状态该用 --error 还是 --invalid
直接用 --error 更合理。BEM 的修饰符应表达「视觉/行为状态」，而非底层校验逻辑。--invalid 容易和 HTML5 的 :invalid 伪类语义重叠，且无法覆盖手动触发的错误（比如提交后服务端返回的错误）。--error 更通用，也更贴近用户感知——“这个字段出错了”，而不是“这个值不满足约束”。
实际项目中常见误用：input--invalid 看似精准，但一旦需要展示「格式正确但业务冲突」（如用户名已被注册），就得额外加 --conflict，破坏一致性。
-
--error统一表示“当前字段处于需用户干预的错误态”，不管来源是前端正则、必填缺失，还是后端返回 - 避免用
--invalid、--failed、--wrong等近义词，防止团队内修饰符泛滥 - 若需区分错误类型（如仅作视觉提示 vs 阻断提交），用 JavaScript 控制是否添加
--error，而非新增修饰符
form__input--error 和 form__field--error 该选哪个
优先用 form__field--error。表单验证的错误反馈对象通常是「字段容器」（含 label、input、help text、error message），不是 input 本身。只给 input 加 --error 会导致 label 颜色不变、icon 不切换、错误消息区域不显隐，最终还得补一堆配套样式或 JS 逻辑。
典型场景：邮箱输入框失焦后校验失败，你需要高亮 label 文字、在 input 右侧显示 × 图标、展开下方红色错误文案——这些都属于 form__field 的职责范围。
立即学习“前端免费学习笔记（深入）”；
-
form__field是 BEM 中推荐的「字段级封装单元」，--error修饰它才能一次性控制整块区域的视觉反馈 -
form__input--error仅适合极简场景（如纯 input 边框变红，无其他联动），但实际项目几乎不存在 - 如果 error message 是独立块（如
form__error-message），它应在form__field--error下自动display: block，而非靠 JS 单独 show/hide
如何让 --error 修饰符不污染非错误状态的样式
关键在 CSS 作用域隔离：所有 --error 相关样式必须限定在修饰符选择器内部声明，禁止跨层级穿透。比如不要写 .form__field--error .form__label，而要写 .form__field--error .form__field-label（假设 label 的 BEM 名为 form__field-label）。
否则当某天 form__label 自身需要响应式字体调整时，.form__field--error .form__label 会意外覆盖新规则，且难以定位。
- 每个 BEM 元素名必须唯一且可预测，
form__field-label比form__label更明确归属 -
--error的样式只改「本块内元素的状态」：颜色、图标、间距、显隐，不修改布局结构（如 float、position） - 慎用
!important：如果发现必须加，说明基础样式没做好层叠设计，应回溯重构form__field的默认状态
JavaScript 添加 --error 时容易忽略的两个时机
一是未等 DOM 渲染完成就操作 class；二是未清理旧错误状态。前者导致样式不生效（尤其 SSR 或动态插入表单），后者造成「上一个错误还没清掉，新错误又叠加」。
例如用 element.classList.add('form__field--error') 后立即调用 scrollIntoView()，若元素还在 document fragment 中，class 添加无效；又或者用户快速切换字段，前一个 form__field--error 没被移除，视觉上多个字段同时红框。
- 确保操作 DOM 前元素已挂载：React 用
useEffect，Vue 用nextTick，原生可监听DOMContentLoaded或用requestAnimationFrame - 每次设置新错误前，先用
element.classList.remove('form__field--error')清理同级所有字段的错误态，再精准添加当前字段的 - 服务端返回错误时，按字段名映射到对应
form__field元素，避免用querySelectorAll('.form__field')硬遍历
最常被跳过的细节是：错误状态的清除必须和校验逻辑解耦。不是“用户输入就清错”，而是“用户修改了该字段且通过了校验才清错”。否则一次误触就会掩盖真实错误。
