css变量本身不会造成死循环，死循环只可能发生在@container style()嵌套@media等系统级查询时，因状态互相触发导致recalculate style不收敛、主线程卡死。
CSS变量本身不会造成死循环，死循环只可能发生在它被用在容器查询或媒体查询的嵌套条件中——比如@container style(--theme: dark)里再写@media (prefers-color-scheme: dark)，浏览器会反复触发状态重判，卡死主线程。
为什么@container style()嵌套@media会卡住
容器查询是“观察容器自身状态”的机制，而@media (prefers-color-scheme)监听的是系统级主题变化。当两者嵌套时，一次系统主题切换会同时触发：容器内--theme值更新 → 容器查询重计算 → 重新进入@media块 → 再次读取prefers-color-scheme → 又触发--theme变更……形成闭环。
- Chrome DevTools 的 Rendering 面板里能看到 Layout Shift Regions 持续高亮闪烁，Performance 录制中 Recalculate Style 节点数飙升且不收敛
- 页面交互完全冻结，
console.log都来不及输出，连requestIdleCallback都不执行 - 该问题在 Chrome 124+、Safari 17.5+ 中已确认复现，Firefox 当前未受影响
怎么快速定位是不是这个嵌套惹的祸
别猜，直接删减验证：
- 临时注释掉所有
@container规则，看页面是否恢复正常响应 - 保留
@container但移除内部所有@media、@supports嵌套，只留纯样式声明 - 在 Elements 面板中右键任意容器元素 → “Force state” → 手动切换
--theme值，观察是否立刻卡顿 - 检查 CSS 文件中是否存在类似
@container style(--theme: dark) { @media (prefers-color-scheme: dark) { ... } }的结构
绕过死循环的实操方案
根本解法不是降级，而是切断嵌套依赖链：
- 把
@media (prefers-color-scheme)提到最外层，用它来设置根变量：:root { --theme: light; } @media (prefers-color-scheme: dark) { :root { --theme: dark; } } - 容器查询只用
@container style(--theme)做分支，不再重复判断系统偏好 - 若必须响应系统变化又需容器上下文，改用 JS 监听：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，然后手动更新容器元素上的data-theme属性，再用@container query([data-theme="dark"]) - 禁用
style()函数中的变量名硬编码：不要写style(--theme: dark)，改用style(--theme)配合container-name限定作用域，避免全局变量污染引发意外重触发
真正容易被忽略的是：死循环不会报错，也不会出现在 Console 或 Performance 的“Errors”标签里——它藏在 Recalculate Style 的持续高耗时里，且只在特定容器尺寸 + 主题切换组合下才爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
