唯一真正减少重复的路径是将变量定义在 :root 中并用 var(--xxx) 引用，因其作用域覆盖整页；局部变量无法被其他组件读取，fallback 必须写成 color: #333; color: var(--text-color, #333)；数值类变量需带单位；响应式字号推荐 clamp()；深色模式应通过 class 切换而非媒体查询直接覆盖变量。

直接在 :root 里定义变量，所有地方用 var(--xxx) 引用，改一处就全局生效——这是唯一真正减少重复的路径。

为什么必须把变量声明在 :root

变量不是“写在哪都能用”的值。:root 等价于 html 元素，作用域覆盖整页；写在 .button 或 .card 里，其他组件根本读不到，子元素也继承不到或被覆盖。

• --color-primary 写在 :root，按钮、标题、表单全都能用
• 写在 .btn 里，.header 就无法复用，后期换主题得挨个 grep 替换
• 局部变量只适合极少数场景（如组件内动态控制），全局管理必须靠 :root

var() 的 fallback 写法错一个字符就失效

写成 color: var(--text-color, var(--fallback))，浏览器不会解析第二层 var()，最终渲染出字面量字符串 "var(--fallback)"，文字直接消失——控制台无报错，Computed 面板里却显示原样。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 正确 fallback：先写兜底值，再覆盖为变量，例如 color: #333; color: var(--text-color, #333);
• 如果依赖另一个变量（如 --text-color: var(--text-default)），确保 --text-default 已在 :root 中声明且有确定值
• 别用函数嵌套 fallback，CSS 不支持

数值类变量必须绑定基础单位

写一堆 .mt-1 { margin-top: 0.25rem; }、.mt-2 { margin-top: 0.5rem; }，等于把重复从值挪到了类名上。后期调大基础单位，要改二十个地方。

• 在 :root 定义 --space-unit: 0.25rem;，工具类用 calc(var(--space-unit) * 4) 生成倍数
• 单位必须显式写出：--size: 16px ✅，--size: 16 ❌（calc(100% - var(--size)) 会失败）
• 字号响应式别靠媒体查询改 :root 变量——:root 是静态作用域，媒体查询里改它不触发重计算；推荐用 clamp(14px, var(--font-size-base), 18px) 配合变量

深色模式切换别用 @media (prefers-color-scheme: dark) 直接覆盖变量

媒体查询触发变量重设时，浏览器会同步重绘所有引用该变量的元素。如果 --bg 用在几十个卡片、按钮上，肉眼可见闪烁。

• 改用 html.theme-dark class 切换：:root.theme-dark { --bg: #1e1e1e; --text: #eee; }
• 配合 transition: background-color 0.2s 实现平滑过渡
• 避免在媒体查询里乱改作用域，否则问题更隐蔽

最常被忽略的是变量求值时机：它在使用处计算，不是定义处；一旦被改写，全局生效，没有“回退”机制——除非你显式重置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！