CSS自定义属性是浏览器原生特性，解决主题切换、组件定制、响应式复用三大需求；需在:root或作用域内声明才能被var()读取，支持JS动态修改、媒体查询重定义及calc()内计算。
Custom Properties 不是“框架加的功能”，而是浏览器原生支持的 CSS 特性——现代框架（React、Vue、Svelte 等）之所以普遍依赖它，是因为它解决了框架最常面对的三个硬需求：主题切换、组件定制、响应式样式复用。没有它，就得靠 JS 拼字符串、CSS-in-JS 库兜底，或者退回预处理器时代手动维护多套变量文件。
var() 函数必须配合 :root 或作用域选择器才能生效
很多人写完 --color-primary: #007bff 就以为万事大吉，结果 var(--color-primary) 渲染不出颜色。根本原因是：变量必须被声明在某个选择器作用域内，且该作用域要能被使用处继承到。
-
:root是最常用的位置，等价于html元素，全局可继承 - 如果只在
.card里声明--bg: #fff，那只有.card及其子元素能读取它 - 伪类（如
:hover）也能声明变量，但仅对该状态生效，且不触发重排——这是实现“无 JS 主题切换”的关键
JavaScript 修改 style.setProperty() 是动态主题的唯一轻量路径
框架里切换暗色模式，本质就是改几组 -- 变量。不用重载 CSS 文件，也不用操作 class 列表或内联 style 属性。
- 改全局变量：
document.documentElement.style.setProperty('--text-color', '#1a1a1a') - 改局部变量：
someElement.style.setProperty('--border-width', '2px') - 读取值要用
getComputedStyle(el).getPropertyValue('--foo')，注意返回值带空格，需.trim() - 别直接赋值
el.style.--foo = '...'——这语法无效，style对象不支持自定义属性名
媒体查询中重定义 :root 变量，比写多套 class 更可靠
响应式布局常要根据屏幕宽度调整间距、字体大小。传统做法是写一堆 @media 块 + 重复选择器；用变量，只需在 :root 里覆盖一次。
立即学习“前端免费学习笔记（深入）”；
- 示例：
@media (min-width: 768px) { :root { --gap: 1.5rem; --font-size: 18px; } } - 所有用
var(--gap)的地方自动响应，无需改 HTML 结构或 JS 逻辑 - 注意：媒体查询里的变量重定义，必须写在
:root下，不能写在组件级 class 里——否则继承链断掉，后代拿不到新值
真正容易被忽略的点是：变量值本身可以参与计算，但 var() 不能直接用于 calc() 外部运算。比如 width: var(--size) <em> 2</em> 是非法的，得写成 width: calc(var(--size) 2)。这个限制让不少人在做动态缩放时卡住。
