CSS变量是组件的配置接口，需按作用域局部定义、用var()引用并设fallback值，避免硬编码和全局污染，状态样式由变量驱动，JS读取时用getComputedStyle并trim()。
组件内只用 var()，别硬编码颜色或尺寸
硬写 #007bff 或 8px 的后果很直接：下游项目想换主题，就得全局搜索替换，漏一处就崩一块。CSS 变量真正的价值是把视觉决策权交出去——.card 不该决定“边框一定是 1px solid #e0e0e0”，而该声明“我用 --card-border 这个配置项”。
- 所有可变值（颜色、圆角、阴影强度、过渡时长）必须抽成变量，比如
--card-bg、--card-border-radius - 在组件根选择器里引用，例如：
.card { background-color: var(--card-bg, #fff); } - fallback 值不能省：
var(--card-bg, #fff)保证变量未定义时样式不塌 - 别在
:root里堆满所有变量——按组件作用域局部定义更安全，比如.card { --card-bg: #fff; }
变量作用域要精准，避免跨组件污染
把所有变量塞进 :root 看似省事，但一旦多个组件都依赖 --primary-color，改一个就全乱。IE11 不支持 :root 变量只是次要问题，真正麻烦的是语义冲突和调试困难。
- 优先在组件选择器内定义变量，如
.btn { --btn-bg: #007bff; }，子元素自动继承 - 需要主题级覆盖时，用带命名空间的类控制作用域：
.theme-dark .btn { --btn-bg: #212529; } - 媒体查询里重设变量比定义
--btn-bg-mobile更干净：@media (max-width: 768px) { .btn { --btn-bg: #0056b3; } } - 慎用 JavaScript 的
element.style.setProperty()——它绕过 CSS 层叠，和媒体查询容易打架，DevTools 里还看不到真实来源
伪类与状态样式必须靠变量驱动，而非重复写死
写一堆 .btn:hover、.btn.is-loading、.btn--danger:hover 是不可维护的。状态组合爆炸的本质，是样式逻辑被绑死在类名上，而不是暴露为可配置入口。
- 每个状态对应一个变量：定义
--btn-hover-bg、--btn-disabled-bg、--btn-loading-bg - 在伪类中重设变量值，而非重写整个规则：
.btn:hover { --btn-bg: var(--btn-hover-bg, #0056b3); } - 确保组件内统一用
var(--btn-bg)，这样.btn--danger:hover自动生效，无需额外 CSS - 别给
var()加!important——它锁死下游覆盖能力，真要覆盖就提升选择器权重，比如加前缀.btn.btn--compact
和 JS 交互时，用 getComputedStyle 读取计算值
组件库（如 PrimeVue）或主题生成工具常需要把 CSS 变量转成具体颜色值做 palette 计算，但直接传 var(--primary-color) 字符串会失败——JS 不解析 CSS 变量，只认计算后的结果。
立即学习“前端免费学习笔记（深入）”；
- 正确方式：
const root = getComputedStyle(document.documentElement); const color = root.getPropertyValue('--primary-color').trim(); - 注意空格：
getPropertyValue()返回值可能带前导空格，务必trim() - 变量未定义时返回空字符串，建议加判断：
color || '#007bff' - 不要在 Shadow DOM 外读
:root——如果组件用了shadowRoot，得从宿主元素或组件根节点读取
var()，而是决定哪些值该暴露、命名是否对齐设计系统、fallback 是否兜得住边界情况——这些细节一旦松动，复用性就断在第一层。 
