CSS未定义变量不能作条件，因其值非字符串/undefined，无法参与==比较；if()仅支持media()/supports()/style()三类静态表达式，复杂逻辑需JS预处理并注入可比字面量。
if() 函数不是“空变量技巧”，它不依赖变量是否为空，而是直接对表达式求值；CSS 里也没有“空变量”概念——自定义属性（--foo）未定义时默认为 initial 或触发无效值回退，不能当布尔条件直接用。
为什么不能把未定义的 CSS 变量当条件用
CSS 自定义属性未声明时，var(--missing) 在大多数属性中会变成无效值，导致整条声明被忽略（例如 color: var(--missing); → 该 color 不生效），但 if() 的 condition 部分不接受未定义变量直接参与比较：
-
if(var(--theme) == 'dark', #000, #fff)—— 若--theme未定义，整个if()表达式失效，不会 fallback 到else分支 - 浏览器不会把未定义变量转成
''或undefined，它连字符串都不是，更无法参与==运算 - 即使写成
if(var(--theme, 'light') == 'dark', ...)，var(--x, fallback)的 fallback 仅在变量未定义时提供默认值，但==比较仍要求两边是可比类型，而 CSS 不做隐式类型转换
真正可用的条件判断组合：media() + supports() + style()
if() 的 condition 必须是能静态求值的表达式，目前只有三类受支持：
-
media(width > 768px)：替代 @media，适合响应式尺寸切换 -
supports(display: grid)：替代 @supports，用于特性检测降级 -
style(color: red)：检查元素是否已计算出某样式（需配合继承或层叠，生产环境慎用）
示例：根据屏幕宽度和是否支持 aspect-ratio 动态设宽高比
img {
aspect-ratio: if(
supports(aspect-ratio),
if(media(width >= 1200px), 16/9, 4/3),
auto
);
}
:empty 是结构判断，不是变量判空
很多人误以为给容器加 data-value="" 就能用 [data-value=""] 模拟“空变量”，但这和 :empty 完全无关：:empty 只看 DOM 子节点有无，不读属性；而属性选择器匹配的是 HTML 属性字面值，哪怕 data-value=" "（带空格）也会命中 [data-value=""] 失败。
- ✅
→ 匹配[data-value=""] - ❌
→ 不匹配[data-value=""]，但会匹配[data-value] - ⚠️
（布尔属性）→ 不匹配[data-value=""]，只匹配[data-value]
若真要靠属性驱动样式逻辑，应显式设置语义化值：data-status="empty"，再用 [data-status="empty"] { display: none; }，而非幻想“空字符串自动触发条件”。
复杂逻辑必须拆到 JS + CSS 变量协同
想实现“后端返回空数据 → 隐藏区域 → 同时更新主题色”，纯 CSS 无法完成链式反应。正确做法是：
- JS 判断
el.textContent.trim() === ''，然后el.style.setProperty('--is-empty', '1') - CSS 中写
if(var(--is-empty) == 1, hidden, visible)—— 注意：这依然不行，因为--is-empty是字符串"1"，而==在if()中不支持字符串数字混判 - 所以得让 JS 写入关键字：
el.style.setProperty('--is-empty', 'true')，CSS 写if(var(--is-empty) == 'true', none, block) - 更稳妥的是用
media()做兜底：if(supports(--is-empty), if(var(--is-empty) == 'true', none, block), block)
真正难的从来不是写一行 if()，而是搞清哪些逻辑必须由 JS 提前归一化、哪些值必须转成 CSS 可比的字面量、以及什么时候该放弃 CSS 条件转用 class 切换——浏览器还没强大到让你用 CSS 替代状态管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
