CSS变量在多列布局中失效，主因是变量继承依赖DOM路径，而display: contents、visibility: hidden、transform等会切断继承链；且@media不支持var()，column-span: all和伪元素也会截断作用域，需在容器上直接定义并加前缀避免拼写错误。
为什么CSS变量在多列布局里突然失效
因为column-count、column-gap这些属性本身不继承，而CSS变量的继承依赖于DOM树路径。当你把--column-gap定义在:root，但实际应用在某个.article元素上时，如果该元素被设置了display: contents或visibility: hidden，变量值就无法向下传递到伪元素（如::first-letter）或子容器内部的列块中。
实操建议：
- 始终在目标排版容器上直接设置变量，而不是只靠
:root——例如：.magazine { --column-gap: 24px; column-gap: var(--column-gap); } - 避免对多列容器使用
transform或filter，它们会触发新的层叠上下文，切断变量继承链 - Chrome对
column-fill: balance的支持不稳定，此时若用JS动态改--column-count，可能触发重排但不重绘，需手动触发offsetHeight读取强制刷新
媒体查询中用CSS变量做断点会失败
这是个隐蔽但高频的坑：@media (min-width: var(--breakpoint-sm))在所有浏览器中都无效。CSS变量不能用于媒体查询条件，因为解析器在计算媒体查询时变量尚未求值。
常见错误现象：样式表加载无报错，但断点完全不触发，var(--breakpoint-sm)被当作非法语法静默忽略。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 断点值必须硬编码或用预处理器（如Sass的
$sm: 640px）生成，不能依赖运行时CSS变量 - 若需动态响应式，改用
window.matchMedia()监听+JS切换类名，再通过类名控制column-count等属性 - 别试图用
@property注册--breakpoint-sm来绕过——它目前不支持媒体查询上下文
首字下沉和变量组合时样式丢失
当给.magazine p:first-child::first-letter设置font-size: var(--lead-font-size)，而父级p又设置了column-span: all，变量值大概率不会生效。原因在于::first-letter伪元素在多列环境中被提升为独立布局上下文，其继承链被截断。
实操建议：
- 把变量声明上提至
body或html，并确保该节点未被all: unset重置 - 改用
inherit兜底：font-size: var(--lead-font-size, inherit);，避免变量未定义时直接坍缩为medium - 慎用
column-span: all——它会让伪元素脱离当前列流，变量作用域随之失效；如必须用，需在伪元素选择器中重新声明变量
变量名拼写错误在排版中更难发现
Flex/Grid布局出错时通常表现为错位或空白，一眼能定位；但多列布局里变量拼错（比如--col-gap写成--col-gab），页面照常分栏，只是column-gap回退到默认值0，视觉上仅是文字挤在一起，极易被当成内容问题而非样式缺陷。
实操建议：
- 在DevTools的Computed面板里直接搜索
column-gap，看最终值是否显示为var(--xxx)还是已解析的像素值 - 用
getComputedStyle(element).getPropertyValue('--col-gap')在Console里验证变量是否存在且可读 - 所有排版相关变量统一加前缀
--layout-（如--layout-column-gap），降低命名冲突概率
