推荐将CSS变量统一定义在:root中，如--card-border-color、--card-border-width等，配合fallback值和显式transition实现主题切换与响应式更新，避免命名笼统或跨组件耦合。
怎么用CSS变量定义卡片的边框和背景色
直接在 :root 或卡片组件的类里声明变量，把颜色、宽度、圆角这些可变项抽出来。这样改一套值，所有用了这些变量的卡片立刻同步更新，不用到处找 border-color 或 background 去改。
常见错误是把变量写死在具体选择器里，比如 .card { --border-color: #e0e0e0; }，结果子元素或响应式规则里取不到——变量得挂到能被继承或全局访问的作用域上。
- 推荐统一放在
:root里，方便跨组件复用：:root { --card-border-color: #e0e0e0; --card-border-width: 1px; --card-border-radius: 8px; --card-bg: #fff; } - 如果卡片有主题变体（如暗色模式），用
@media (prefers-color-scheme: dark)覆盖变量值，别写两套完全独立的样式 - 避免用变量存复合值，比如
--card-border: 1px solid #e0e0e0—— 后续想单独调边框宽度或颜色时没法拆
卡片类如何安全引用这些CSS变量
用 var() 函数读取，但必须设好 fallback 值。浏览器不支持 CSS 变量的老版本（比如 IE）会直接忽略整条声明，没 fallback 就可能丢失边框或背景。
典型场景是多个卡片嵌套，父容器设了变量，子卡片组件也要能响应式继承或覆盖。这时候变量作用域和层叠顺序就关键了。
立即学习“前端免费学习笔记（深入）”；
- 写法要带 fallback：
border: var(--card-border-width, 1px) solid var(--card-border-color, #e0e0e0); - 不要在
border这种简写属性里混用变量和固定值，容易因解析顺序出错；拆成border-width、border-style、border-color更稳 - 如果卡片内有 header/footer 子区域需要不同背景，直接在子元素上重设变量，比如
.card-header { --card-bg: #f8f9fa; }，比写新 class 更轻量
为什么 border-radius 和 background 搭配变量时容易漏掉过渡效果
单纯换变量值不会触发动画，border-radius 和 background 默认不可动画。想让卡片在主题切换或 hover 时平滑过渡，得显式加 transition，且只对支持动画的属性生效。
很多人以为设了 transition: all .2s 就万事大吉，结果发现圆角跳变、背景闪一下才变——其实是 background 里的渐变或图片不支持过渡，或者变量变更没触发重绘。
- 只过渡确定支持的属性：
transition: background-color .2s, border-color .2s, border-radius .2s; - 避免对
background简写属性做过渡，尤其含background-image时，浏览器无法插值 - 暗色模式切换时，用
prefers-color-scheme触发变量更新，再靠已声明的transition自动生效，别用 JS 强制重排
哪些地方最容易误用CSS变量导致维护困难
变量名太笼统（比如 --color-1）、层级嵌套过深、或在伪元素里反复声明同一组变量，都会让后续接手的人不敢动。
真实项目里最常踩的坑不是语法错，而是变量“看似复用，实则耦合”：一个 --card-bg 同时被卡片、弹窗、表单区块引用，结果改个卡片背景，登录框也跟着变灰了。
- 变量命名带上语义和作用域，比如
--card-bg-default、--card-bg-hover，而不是泛泛的--bg-primary - 避免跨组件共享同一变量名却不加前缀，
--border-radius这种名字太通用，按钮、输入框、卡片都用它，后期根本分不清谁该听谁的 - 如果某张卡片需要特殊边框（比如虚线+双色），宁可新增变量
--card-border-style-dashed，也不要临时用!important覆盖
变量本身不难，难的是让变量之间的边界清晰、变化可预期。改一个值之前，先花十秒想想它到底影响了哪些视觉模块——这比查文档还管用。
