直接用:root定义按钮变量会导致串色、覆盖及无法响应状态；应将变量限于静态配置项，组件级变量加前缀绑定选择器，禁用态需配合pointer-events和cursor，动态主题须由js注入或class切换驱动。
直接用 :root 定义按钮变量会串色、覆盖、无法响应状态
全局变量不是万能解药。把所有按钮尺寸、颜色、间距都塞进 :root，比如 --btn-color、--btn-padding，结果是：换一个主题时所有按钮一起变，幽灵按钮的背景色被主按钮的 --btn-color 覆盖，禁用态没法自动降透明度——因为 CSS 变量不支持运行时函数运算（fadeout()、darken() 这类操作在纯 CSS 里不存在）。
真正可行的做法是：变量只管「配置项」，不动「逻辑」；颜色计算、状态推导交给预处理器或 JS。
- 按钮颜色变体（primary/danger/outline）必须用
Less或Sass的mixins或@each生成，不能靠var(--btn-color)+ class 切换 -
:root里只放真正全局且静态的值，例如--spacing-unit: 4px、--font-size-base: 16px - 组件级变量要加前缀并绑定到选择器，比如
.btn { --btn-padding-y: 8px; }，而不是扔进:root
calc() 套 var() 控制尺寸档位，但别漏掉所有关联属性
只改 font-size 或只缩 padding，按钮就变形。小号按钮如果 font-size: 0.875rem 但 padding: 0.5em 1em 没同步缩小，文字就贴边；border-width: 2px 不跟着减半，边框就显得笨重。
正确做法是用 calc() 对每个尺寸属性做比例缩放，并统一锚定一个基础变量：
- 先定义基础值：
:root { --btn-base: 1; --btn-scale-sm: 0.75; --btn-padding-y: 0.5em; --btn-font-size: 1rem; --btn-border-width: 2px; } - 再在类中批量缩放：
.btn--sm { --btn-padding-y: calc(var(--btn-padding-y) * var(--btn-scale-sm)); --btn-font-size: calc(var(--btn-font-size) * var(--btn-scale-sm)); --btn-border-width: calc(var(--btn-border-width) * var(--btn-scale-sm)); } - 图标尺寸必须用相对单位：
width: 1em，而非16px，否则不随字体缩放
按钮禁用态不能只靠 opacity，变量得配合 pointer-events 和 cursor
写 .btn:disabled { opacity: 0.4; } 是常见错误。视觉上灰了，但键盘用户仍能 Tab 进去，触屏点击热区还是全尺寸，无障碍也不通过。
CSS 变量在这里只能辅助，不能替代语义规则：
- 禁用态必须显式声明：
pointer-events: none; cursor: not-allowed; - 如果要用变量控制禁用透明度，得绑定到具体类：
.btn { --btn-disabled-opacity: 0.4; } .btn:disabled { opacity: var(--btn-disabled-opacity); } - 千万别在
:root里写--btn-disabled-opacity并期望它自动生效——没有 JS 或预处理器介入，CSS 不知道什么时候该“应用”这个值
想让按钮支持运行时主题切换？变量要和 JS 注入或 class 切换联动
纯 CSS 变量无法监听 React 的 theme 状态或 Vue 的 computed 属性。所谓“动态主题”，本质是 JS 改变量值 + 浏览器重绘。
安全可控的做法只有两种：
- 用
element.style.setProperty('--btn-bg', '#dc3545')直接注入到按钮 DOM 节点上，变量作用域精准，不影响其他组件 - 用 class 切换驱动变量，例如：
.btn.theme-dark { --btn-bg: #343a40; --btn-text: #fff; }，再由 JS 控制document.body.classList.toggle('theme-dark') - 避免修改
document.documentElement上的变量——一次改动，全站按钮、卡片、表单全跟着变，调试时根本分不清谁动了谁
最易被忽略的是：变量名没加组件前缀、没限制作用域、没配 fallback 值。调试时打开 DevTools 的 Computed 面板，展开 custom properties，才能看清当前节点到底继承了哪个 --btn-* 值——光看源码，90% 的变量问题都定位不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
