用--btn-group-gap配合gap统一控制按钮组间距，需设父容器display:flex并声明变量，gap仅对flex/grid容器生效，ie需fallback为margin-inline-end+:not(:last-child)。
按钮组间距不一致？用 --btn-group-gap 配合 gap 统一控制
直接给每个按钮加 margin-right 是最常见也最危险的做法——末尾多出空白、RTL 布局翻转失效、动态增删按钮时漏掉 :last-child 清除逻辑。真正可靠的方案是把间距交给容器：父元素设 display: flex，再声明 --btn-group-gap: 8px，子项用 gap: var(--btn-group-gap)。
注意：gap 只对 display: flex 或 display: grid 容器生效。很多人调了半天没反应，其实是忘了给按钮组容器加 display: flex。别在按钮本身写 gap，它不是子项属性。
兼容 IE 的 fallback 方案是 margin-inline-end: var(--btn-group-gap) 配合 :not(:last-child)，但必须确保该规则优先级足够高，否则会被框架默认样式覆盖。
hover / disabled 状态下 --btn-color 不生效？检查变量是否被显式引用
定义了 --btn-color: #007bff 并不等于按钮文字色就自动变蓝。关键看 CSS 规则里有没有真正用到 color: var(--btn-color)。很多框架（如 Bootstrap）的悬停色是硬编码或依赖另一个变量（比如 --btn-hover-bg），你改了 --btn-color 它根本不会读。
实操要点：
- 禁用态要单独覆盖：
button:disabled { --btn-color: #6c757d; color: var(--btn-color); } - 悬停态别指望“自动变深”，得显式重设：
button:hover { --btn-color: #0056b3; }，且前提是color始终绑定var(--btn-color) - IE 不支持伪类中修改自定义属性，这种链式响应会退化为静态色；更稳妥的是定义独立变量：
color: var(--btn-hover-color, #0056b3)
圆角、边框、背景色各自需要独立变量，别指望一个 --btn-color 全包
按钮的状态变化涉及多个视觉通道：文字色、背景色、边框色、悬停背景、焦点环……它们语义不同、可访问性要求不同，强行共用一个变量会导致一改全乱。比如 button:disabled 的背景不能简单用 lighten(var(--btn-bg), 30%)，深色主题下会发灰，应显式设 --btn-bg-disabled: #e9ecef 和 --btn-text-disabled: #6c757d。
推荐的最小变量集：
-
--btn-bg：默认背景 -
--btn-bg-hover：悬停背景 -
--btn-bg-disabled：禁用背景 -
--btn-text、--btn-text-hover、--btn-text-disabled -
--btn-border、--btn-border-hover -
--btn-radius（建议分层：--radius-sm / --radius-md）
所有 border-radius 必须显式写成 border-radius: var(--btn-radius, 8px)，漏掉任何一处硬编码值（比如 border-radius: 4px），全局圆角控制就失效。
变量声明位置错了？:root 不是万能作用域
:root { --btn-color: red } 在按钮内部写是无效语法，浏览器直接忽略整条规则。变量继承只靠 DOM 层叠链，就近原则生效：想让某个按钮用特定颜色，就得在它自己的选择器里声明，比如 .btn-primary { --btn-color: #28a745; }。
更复杂的情况：
- Shadow DOM 中变量不会透传，必须在
:host或 shadow root 内重新声明 - Vue/React 的 scoped 样式或 CSS-in-JS 组件，
:root变量默认进不去，需显式注入到根元素 style 上 - 第三方 UI 库（如 Ant Design）不认你的变量，得用更高优先级选择器 +
!important覆盖，但这是最后手段
调试时打开 DevTools 的 Computed 面板，确认目标元素的 color 值显示的是计算后的颜色（如 rgb(0, 123, 255)），而不是 var(--btn-color) 字符串——后者说明变量没被正确解析或作用域没覆盖到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
