CSS变量不能在JS中直接用于逻辑判断，因其仅是CSS层的字符串属性，JS需通过getComputedStyle().getPropertyValue()读取后手动转换为number/boolean，且未定义时返回空字符串。
CSS变量不能直接用于JS逻辑判断，因为它们在运行时根本不可读作布尔值或数字——var(--is-active) 是 CSS 层的字符串替换指令，JS 拿不到这个“计算过程”，只能拿到最终渲染后的样式值（而且还得手动提取）。
JS 无法直接读取未计算的 CSS 变量值
CSS 变量（如 --is-active: 1）只是自定义属性，浏览器不会把它当作 JS 可执行变量暴露出来。你写 if (document.documentElement.style.--is-active) 会报语法错误；写 document.documentElement.style.getPropertyValue('--is-active') 也拿不到——因为该属性不在 style 对象上，它在 :root 的 CSS 规则里。
- 必须用
getComputedStyle(document.documentElement).getPropertyValue('--is-active')才能读到值 - 返回的是字符串（如
"1"或"0.5"），不是 JS 原生 number/boolean，需显式转换：parseInt(...)或Boolean(Number(...)) - 如果变量未定义或值非法（如
--is-active: auto），返回空字符串，不报错也不 fallback
媒体查询匹配和变量求值是两个独立阶段
@media (min-width: var(--sm)) 会静默失效，不是 JS 的问题，而是 CSS 引擎根本不允许变量出现在媒体查询条件中——匹配发生在变量解析之前。
- 你以为 JS 改了
--sm就能触发重排媒体查询？不行。媒体查询只响应视口、设备特性等原生信号 - 试图用
var(--sm, 768px)当兜底？语法校验直接失败，整条@media规则被丢弃 - 真要动态断点，得靠 JS 监听
resize+ 手动切换 class 或调用matchMedia()
内联 style 属性不支持 var()，更别说驱动 JS 判断
<div style="color: var(--primary); --flag: true"> 中的 <code>--flag 不会被解析，var() 也不会生效——style 属性只接受静态值，不走 CSSOM 计算流程。
- 你在
style里写的--flag: true会被浏览器当作非法 token 静默丢弃 - 想让 JS “感知”某个状态，不能靠塞进
style，而要用dataset、aria-属性，或真实 class 名（如is-active） - 把状态逻辑塞进 CSS 变量再让 JS 去读，属于绕远路：既增加解析开销，又引入字符串转换风险
真正该做的，是让 JS 管状态、CSS 管表现——变量只用来透出配置（如主题色、间距），别让它承担控制流职责。一旦你发现 JS 里频繁 parseInt(getPropertyValue('--x')) > 0，说明逻辑边界已经模糊了。
