H5渐变色板规范核心是可维护、可切换、可复用，需拆解为颜色停点变量、语义化三段式命名（如--brand-gradient-cta-start）、统一声明于:root并分组管理，且必须提供oklch降级fallback。
在 H5 项目中规范渐变色板的 CSS 变量命名与复用，核心不是“怎么写渐变”，而是“怎么让渐变可维护、可切换、可跨组件复用”。关键在于分离可变部分、语义化命名、统一作用域，并规避常见陷阱。
渐变变量必须拆解为颜色停点，而非整条函数
错误做法：--gradient-primary: linear-gradient(135deg, #4facfe, #00f2fe)——这会让变量变成静态字符串，无法被 JS 修改，也无法响应主题切换。
正确做法是把渐变中真正会变的部分抽成独立变量：
--color-primary-start: oklch(0.62 0.18 250);--color-primary-end: oklch(0.52 0.22 200);--gradient-primary: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end));
这样换主题时只需改两个颜色变量，所有用到 var(--gradient-primary) 的地方自动更新。记得加 fallback：background-image: var(--gradient-primary, linear-gradient(135deg, #4facfe, #00f2fe));
命名需带层级与用途前缀，避免歧义
变量名要能一眼看出“谁的”“什么用”“在哪用”。推荐三段式结构：--{domain}-{purpose}-{state}：
-
--brand-gradient-cta-start（品牌级、主行动按钮、起始色） -
--ui-gradient-card-hover-end（组件级、卡片悬停态、终止色） -
--theme-gradient-surface-active（主题级、表层元素激活态）
禁用无上下文的简写，如 --grad1、--c1 或 --bg；也避免纯技术描述，如 --blue-to-cyan——它不表达语义，只描述外观，后期换色时名实不符。
统一定义在 :root，按模块分组管理
所有基础渐变变量必须声明在 :root，确保 H5 页面内任意组件（包括 Vue/React 子组件、Web Components、甚至内联 SVG）都能继承。
建议在 CSS 文件中按逻辑分组，用注释隔开：
:root {
/* === 品牌渐变 === */
--brand-gradient-primary-start: oklch(0.62 0.18 250);
--brand-gradient-primary-end: oklch(0.52 0.22 200);
<p>/<em> === UI 组件渐变 === </em>/
--ui-gradient-button-hover-start: oklch(0.72 0.15 240);
--ui-gradient-button-hover-end: oklch(0.65 0.18 230);</p><p>/<em> === 主题适配 fallback === </em>/
--brand-gradient-primary-start-fallback: #4facfe;
--brand-gradient-primary-end-fallback: #00f2fe;
}</p>
不要把页面专属渐变塞进 :root，例如首页轮播图特殊渐变，应放在 body#home 下覆盖，保持根变量精简（建议不超过 10 组基础梯度）。
必须提供降级方案与兼容性兜底
H5 环境复杂，iOS Safari 旧版、微信内置浏览器等可能不支持 oklch() 或动态变量插值。因此每处使用都需 fallback：
- 颜色变量本身加 fallback：
--brand-gradient-primary-start: oklch(0.62 0.18 250); /* fallback: hsl(218 32% 47%) */ - CSS 使用时双层兜底：
background: linear-gradient(135deg, var(--brand-gradient-primary-start, #4facfe), var(--brand-gradient-primary-end, #00f2fe)); - 对不支持
oklch的环境，可在@supports not (color: oklch(0 0 0))中批量降级整套变量
切记：CSS 变量的 fallback 必须是静态值，不能嵌套 var(--fallback)，否则旧浏览器直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
