应拆分语义与维度：--primary-h、--primary-s、--primary-l 分开定义，--color-text-primary 与 --color-primary 独立声明，禁用色板编号命名，hsl() 中 var() 使用需严守单位规则，多主题须挂载到 ，模块配色靠选择器作用域与前缀隔离。
为什么直接写 --primary-color: #007bff 是错的起点
这不是语法错误，而是维护灾难的伏笔。一旦设计系统升级、需要适配暗色模式或支持用户自定义主题，你得满项目搜 #007bff 替换，还可能漏掉某处 hsl(210, 100%, 50%) 的等效写法。
真正该拆的是语义和维度：
-
--primary-h、--primary-s、--primary-l分开定义，不是--primary-color: hsl(210, 70%, 60%) -
--color-text-primary和--color-primary必须独立——它们可能同色，但用途不同，主题切换时修改逻辑也不同 - 避免
--blue-500这类基于色板编号的命名，换成--color-brand-accent或--color-cta-background
hsl() 里嵌 var() 的硬性规则
浏览器允许在 hsl() 三个参数里分别用 var()，但 calc() 有严格限制，稍错就整条声明失效。
- 色相（h）必须是无单位整数：
hsl(var(--primary-h), var(--primary-s), var(--primary-l))✅；hsl(calc(var(--primary-h) + 30deg), ...)❌ - 饱和度（s）和亮度（l）必须带
%单位：calc(var(--primary-s) * 0.9)✅；calc(var(--primary-s) * 0.9%)❌（单位重复） - 不能跨类型运算：
calc(var(--primary-h) + var(--primary-s))会失败，因为--primary-s是字符串"70%"，无法与数字相加
多主题切换必须挂载到
写 :root.theme-dark { --color-bg: #1a1a1a; } 没用，除非 class 真正在 元素上。挂在 上完全不匹配 :root 选择器。
- JS 切换主题必须操作
document.documentElement.classList，不是document.body.classList - 服务端渲染时，初始 HTML 的
要正确输出，否则首屏闪白 - 深色模式下直接把
--primary-l从60%改成20%往往显脏，更稳妥的是先降--primary-s到0%去色，再微调--primary-h校正冷暖
模块级配色怎么避免污染全局
变量本身没有“局部”概念，作用域由声明位置决定。想让某个卡片组件自带配色逻辑，又不影响其他模块，关键在声明位置和命名前缀。
- 在
.card-promo选择器里重设变量：.card-promo { --color-primary: #6a5acd; }，后代用var(--color-primary)自动继承 - 命名加模块前缀：
--card-promo-bg而不是--bg，防止和.modal的--bg冲突 - Shadow DOM 里变量不会自动继承
:root值，必须显式在:host或组件根元素上声明
CSS 变量真正的复杂点不在定义，而在层级意图是否清晰：你改一个 --primary-h，到底想影响整个品牌色系，还是只调某个按钮的视觉重量？没想清楚这点，后面所有命名和作用域设计都会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
