容器查询中CSS变量无法跨容器继承，因var()只向上查找当前容器及其祖先定义的变量，不穿透至:root或兄弟容器；必须在启用container-type的元素上显式定义变量，如.card { --font-lg: 1.5rem; container-type: inline-size; }。
容器查询中CSS变量无法跨容器继承
容器查询（@container）的样式作用域是独立的，var(--x) 在容器内求值时，只向上查找该容器元素自身及其祖先元素上定义的变量，不会穿透到 :root 或兄弟容器。这意味着你在 :root 定义的 --spacing-sm，在 .card 容器里用 var(--spacing-sm) 可能读不到——除非你显式在 .card 上也设一遍。
常见错误现象：卡片组件在不同宽度下字体没变化，检查发现 @container card (width > 400px) { font-size: var(--font-lg); } 一直回退到 fallback 值，因为 --font-lg 只在 :root 声明，而 .card 没有继承链。
- 必须在启用
container-type的元素上直接定义所需变量，例如.card { --font-lg: 1.5rem; container-type: inline-size; } - 避免把所有变量堆在
:root后指望“全局可用”，那在容器查询中基本失效 - 组件级变量推荐带命名空间，如
--card-font-size，而非复用--font-lg这类泛化名
媒体查询重设的变量对容器查询无效
很多人习惯在 @media 中重设 :root 变量来适配视口，比如 @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }。但这对容器查询完全没用——@container 不响应视口变化，也不触发 :root 变量更新后的样式重算。
典型误用：你在 @media (min-width: 768px) 里改了 --gap，但卡片内部的 @container card (width > 320px) 仍用旧值，且不会自动同步。
立即学习“前端免费学习笔记（深入）”；
- 容器查询所需的变量，必须在对应容器元素上通过 JS 或内联 style 动态设置，或在容器规则块内显式重定义
- 不要指望
window.matchMedia监听后调用setProperty能驱动容器内样式，它只影响继承链上的属性，不触发容器查询匹配重评估 - 若需深色模式+容器响应双重逻辑，得分开处理：媒体查询控制全局语义色，容器查询控制布局密度相关变量
容器名称缺失导致变量作用域混乱
container-name 不只是可选装饰，它是变量作用域隔离的关键。没设 container-name 的容器，其 container-type: inline-size 会归入匿名容器组，所有未命名容器共享同一套查询上下文——结果就是你在 .sidebar 里定义的 --sidebar-width-threshold，可能被 .card 的 @container (width > var(--sidebar-width-threshold)) 错误引用。
更糟的是，这种错乱在 DevTools 里几乎不可调试：变量值显示正常，但查询条件始终不匹配，因为浏览器根本没把它当有效容器上下文。
- 每个需要独立响应逻辑的容器，必须设唯一
container-name，如container-name: card、container-name: sidebar - 变量名也应与容器名对齐，例如
.card { --card-min-width: 300px; container-name: card; } - 禁止用 class 名拼接生成容器名（如
container-name: card-md），这会让 JS 切换 class 后容器查询失效
服务端渲染中容器查询变量初始化缺失
SSR 或静态生成的 HTML 页面，首屏渲染时容器尺寸尚未计算，@container 规则根本不会生效。此时依赖容器变量的样式（如 font-size: var(--card-title-size)）会直接 fallback，直到 JS 加载、容器尺寸测量完成才补上——造成明显的样式跳变，且变量值在 hydration 前无法预置。
这个问题在 Next.js、Nuxt 等框架中尤其明显：你用 useEffect 设置容器变量，但用户已经看到错位的标题了。
- 首屏必须用视口媒体查询兜底，例如在
@media (min-width: 768px)中为卡片设默认--card-title-size - 容器变量初始化建议用
style属性内联注入，而不是等 JS 执行后再setProperty - 避免在容器查询中使用纯计算型变量（如
calc(var(--base) * 1.2)），SSR 无法预判结果，容易导致 hydration 不一致
容器查询本意是解耦响应逻辑，但变量管理稍一松懈，就会变成比传统媒体查询更难 debug 的隐性陷阱——关键不在“能不能用”，而在“变量从哪来、作用域在哪、何时生效”这三个点是否全程可控。
