表格斑马纹必须抽成CSS变量，是为了实现颜色语义解耦、统一深色/浅色模式切换、避免硬编码引发的维护灾难；推荐按功能角色定义--surface-row-primary和--surface-row-secondary等变量，并通过data-theme控制主题切换。
直接说结论：用 CSS 变量控制斑马纹，不是为了“更酷”，而是为了解耦颜色语义、统一深色/浅色模式切换、避免硬编码导致的维护灾难。
为什么表格斑马纹必须抽成 CSS 变量？
你写的 tbody tr:nth-of-type(odd) { background: #f5f7fa; } 看似干净，但只要项目里出现以下任一情况，就会立刻失控：
- 需要适配深色模式，而
#f5f7fa在暗背景下变成“灰白斑块”，完全不可读 - 设计稿改了主色调，你得全局搜
#f5f7fa，再逐个确认是不是斑马纹——结果发现它还被用在边框、按钮悬浮态、甚至 canvas 填充色里 - 第三方组件（如
el-table）内部也用了同类颜色，但没走你的变量，导致视觉断层
本质问题不是“能不能写死”，而是“写死后谁来保证它在所有上下文里都合理”。CSS 变量就是那个“责任人”。
怎么定义斑马纹变量才不翻车？
别用 --zebra-odd / --zebra-even 这种带实现细节的命名。它们会绑架语义——比如某天产品经理说“偶数行要和 hover 背景一致”，你就得改名或加新变量，逻辑变重。
立即学习“前端免费学习笔记（深入）”；
推荐按**功能角色**定义：
-
--surface-row-primary：默认数据行背景（对应nth-of-type(odd)） -
--surface-row-secondary：交替行背景（对应nth-of-type(even)） -
--surface-row-hover：悬停行背景（注意：不能用!important覆盖，应靠 specificity 或 order 控制）
这样哪怕换掉整个斑马纹逻辑（比如改成按分组着色），变量名依然成立，JS 动态计算行类时也能复用同一套语义。
深色模式下变量怎么同步生效？
很多人以为加个 @media (prefers-color-scheme: dark) 就完事，但实际漏掉三个关键点：
- 用户手动切换主题（非系统级）时，
prefers-color-scheme不触发 - 部分浏览器对
prefers-color-scheme的媒体查询支持滞后（如旧版 Safari） - 表格里嵌了
iframe或 Canvas，其内部样式不受父级 media query 影响
稳妥做法是：把主题状态挂到 :root 上，用 class 切换驱动变量：
html[data-theme="dark"] {
--surface-row-primary: #1e1e1e;
--surface-row-secondary: #2d2d2d;
}
html[data-theme="light"] {
--surface-row-primary: #ffffff;
--surface-row-secondary: #f9f9f9;
}
然后 JS 控制 document.documentElement.setAttribute('data-theme', 'dark')，比监听媒体查询更可控、更可测试。
动态表格（如 el-table、Ant Design Table）怎么接变量？
这类组件通常不让你直接写 tbody tr:nth-of-type(odd)，而是封装了 row-class-name 或 cell-class。这时候变量不能只靠 CSS 注入，得让 JS “感知语义”：
- Vue 中用
:row-class-name="getRowClass"，函数返回rowIndex % 2 === 0 ? 'row-primary' : 'row-secondary' - 对应 CSS 写
.row-primary { background-color: var(--surface-row-primary); }，而非直接写颜色值 - 如果组件强制内联样式（如某些老版本 Ant Design），需用
!important+ 更高 specificity 强制覆盖，但这是兜底手段，不是常态
重点在于：JS 只负责“分配语义类”，不负责“决定颜色值”。颜色永远由变量控制，哪怕某天你要把斑马纹改成按数据状态着色（如 error 行固定红底），变量体系也不用重构。
真正容易被忽略的，是表格中 <th> 和 <code><td> 的边框、分割线颜色。它们常被写成 <code>#e0e0e0 这类硬编码值，和斑马纹变量完全脱节。一旦深色模式启用，表头线可能消失或过亮——这不是斑马纹的问题，是颜色体系没对齐。
