CSS变量须在CSS规则中用:root或选择器定义，如:root { --main-color: #3498db; }；HTML中通过class应用含var()的样式，不可在style属性直接写var()；JS通过getComputedStyle和setProperty读写。
怎么在HTML里定义CSS变量
CSS变量（也叫自定义属性）必须写在CSS规则里，不能直接写在HTML的style属性中——这是新手最容易卡住的地方。你得用:root或某个选择器来声明，比如：
:root {
--main-color: #3498db;
--spacing-md: 16px;
}
这里:root等价于html元素，作用域覆盖整个文档。如果只想让变量在某个组件内生效，也可以写成.card { --card-padding: 12px; }，但注意：子元素要显式继承或重新读取，不会自动“穿透”。
怎么在HTML元素上用CSS变量
不是用style="color: var(--main-color)"这种写法——那是错的。HTML标签本身不解析var()，必须靠CSS规则来桥接。正确做法是：
- 先在CSS里定义变量（如上）
- 再在样式中用
var()函数引用它，例如：.btn { background-color: var(--main-color); padding: var(--spacing-md); } - 然后在HTML里照常使用这个类：
<button class="btn">点击</button>
如果你试图在style属性里直接写var(--x)，浏览器会忽略它，因为内联样式不支持运行时计算（除非你用JS动态设置）。
立即学习“前端免费学习笔记（深入）”；
为什么var()有时不生效
常见原因就三个：
-
--my-var拼错了，或者大小写不一致（CSS变量区分大小写） - 变量定义在某个局部选择器里（比如
.modal { --z-index: 1000; }），但你在body下另一个元素里用var(--z-index)——超出作用域，回退到初始值（通常是unset） - 没设默认值，而变量未定义，又没提供fallback，比如
color: var(--text-color, #333);漏了, #333，一旦--text-color不存在，整条声明就无效
调试时可以用浏览器开发者工具的“Computed”面板看最终计算出的值，也能看到哪些var()被标记为“invalid”。
怎么用JS读写CSS变量
这是真正把HTML和CSS变量联动起来的关键。JS不能直接操作--xxx，得通过getComputedStyle或style.setProperty：
const root = document.documentElement;
// 读
const color = getComputedStyle(root).getPropertyValue('--main-color').trim();
// 写
root.style.setProperty('--main-color', '#e74c3c');
注意：getPropertyValue返回带空格的字符串，要用trim()；setProperty只影响当前节点及其后代，对:root调用就是全局改。
别指望用dataset或getAttribute去抓--xxx，它们根本不是HTML属性，只是CSS语法糖。
