CSS变量需由JS主动设置data-valid属性来驱动样式，因:valid/:invalid伪类仅响应原生约束且存在兼容性问题；应定义:root变量并用属性选择器映射，避免直接操作style或依赖@property动画。
可以，但必须由 JavaScript 主动设置状态，CSS 变量本身不校验、也不监听输入变化——它只负责把 JS 设置的 data-valid 或 class 映射成样式。
为什么不能只靠 :valid 和 :invalid 伪类
这些伪类只响应原生约束（required、type="email"、pattern），且触发时机不可控：页面一加载，空的 required 字段就匹配 :invalid，边框立刻变红；JS 调用 setCustomValidity('') 清除错误后，:invalid 状态在 Safari 上可能延迟消失；后端返回的字段级错误（比如“用户名已被占用”）完全无法触发伪类。
data-valid 属性 + CSS 变量是最稳的链路
JS 主动设置状态，CSS 只负责映射和渲染，职责清晰、兼容性好、可预测性强：
- JS 设置时统一用
input.setAttribute('data-valid', 'false')，注意值必须加引号，不要写成false（部分浏览器解析异常） - CSS 在
:root或表单容器上定义基础色变量，例如：:root { --form-border-color-error: #ef4444; --form-border-color-success: #22c55e; } - 用属性选择器绑定变量值：
input[data-valid="true"] { border-color: var(--form-border-color-success); }，而不是在:valid里写border-color: var(--form-border-color-success) - 避免直接操作
style.setProperty()，容易被外部样式覆盖；优先走data属性驱动变量，再由变量控制样式
transition 对变量值变化不生效，得绕开
CSS 变量不是可过渡的原生属性，border-color: var(--error) 的过渡依赖于 --error 值本身的变更——而浏览器不把变量值变化视为可动画属性：
立即学习“前端免费学习笔记（深入）”；
- 如果需要平滑过渡，直接写
transition: border-color 0.2s，并在不同状态选择器里分别指定具体颜色值（如input[data-valid="false"] { border-color: #ef4444; }） -
@property可声明可动画变量，但 Chrome 108+ 才支持，Firefox/Safari 基本不支持，生产环境慎用 - placeholder 变色同理：
.invalid::placeholder { color: var(--error); }不会过渡，要写成.invalid::placeholder { color: #ef4444; transition: color 0.2s; }
变量没生效，90% 是因为作用域断了或被覆盖——检查是否定义在 :root 或父容器，且目标元素能继承；也别在元素级 style 里重复定义同名变量，否则会截断链路。
