纯 CSS 变量本身不能判断验证结果，但能高效驱动样式响应 JS 控制的状态变化；关键在于用 data 属性（如 data-valid="false"）由 JS 主动设置验证状态，CSS 通过属性选择器绑定变量并控制 border-color 等样式，避免依赖不可控的 :valid/:invalid 伪类，兼顾兼容性、即时性与可维护性。
纯 CSS 变量本身不能“判断”验证结果，但能高效驱动样式响应 JS 控制的状态变化；关键不是让 CSS 去校验，而是让它忠实地反映 JS 设置的验证状态。
为什么不能只靠 :valid 和 :invalid 伪类
这些伪类只响应原生约束（required、type="email"、pattern），且触发时机不可控：页面一加载，空的 required 字段就匹配 :invalid，边框立刻变红；JS 调用 setCustomValidity('') 清除错误后，:invalid 状态可能延迟消失，尤其在 Safari 上；后端返回的字段级错误（比如“用户名已被占用”）完全无法触发伪类。
用 data- 属性 + CSS 变量才是可靠链路
JS 主动设置状态，CSS 只负责映射和渲染，职责清晰、浏览器兼容性好、可预测性强。
- JS 设置状态时统一用
setAttribute('data-valid', 'true')或'false'，注意值必须加引号：input.setAttribute('data-valid', 'false')，不要写成false（部分浏览器解析异常） - CSS 在
:root或表单容器上定义变量，例如：:root { --form-border-color: #d1d5db; --form-border-color-error: #ef4444; --form-border-color-success: #22c55e; } - 用属性选择器绑定变量值：
input[data-valid="true"] { --validation-state: success; } input[data-valid="false"] { --validation-state: error; } input { border-color: var(--form-border-color); } input[data-valid="true"] { border-color: var(--form-border-color-success); } input[data-valid="false"] { border-color: var(--form-border-color-error); } - 避免直接操作
style.setProperty()，容易被外部样式覆盖；优先走data属性驱动变量，再由变量控制样式
变量命名与复用要注意作用域和 fallback
变量没生效，90% 是因为作用域断了或被覆盖。
立即学习“前端免费学习笔记（深入）”；
- CSS 变量默认不继承，确保目标元素能访问到变量定义位置（推荐定义在
:root或最外层form上） - 在
border这类复合属性中使用变量更安全，比如写border: 2px solid var(--form-border-color-error)，而不是单独设border-color—— 否则可能丢失border-style - 所有
var()调用都加 fallback 值：background-color: var(--form-bg-error, #fff8f8)，防止变量未定义导致样式崩塌 - 别在伪类规则里给变量加
!important，旧版 Safari 会忽略带!important的var()值
移动端和 Safari 的重绘延迟怎么绕过
JS 改了 data-valid，但边框色卡顿半秒才变，这是 Safari 对属性变更重绘的已知延迟。真正稳定的解法是：把状态切换全交给 class 控制，变量只管“画”，不管“判”。
- JS 不再只改
data-valid，而是同步操作 class：input.classList.toggle('is-invalid', !isValid) - CSS 用 class 触发变量赋值：
.is-invalid { --validation-state: error; } .is-valid { --validation-state: success; } - 所有样式仍通过
var(--validation-state)或映射后的颜色变量消费，保持变量管理优势，又避开伪类和属性变更的渲染缺陷 - 这样既保留了 CSS 变量的可维护性，又获得 JS 状态切换的即时性和跨浏览器一致性
最易被忽略的一点：变量名要带语义前缀（如 --form-error-border-color），而不是笼统叫 --border-color —— 同一个变量名可能在按钮、卡片、表单里重复定义，不加前缀极易被意外覆盖，调试时根本看不出哪来的值。
