css自定义属性名必须静态，无法在属性名中用var()动态拼接；动态命名需在js中字符串拼接后调用setproperty()，并校验索引有效性，注意作用域与内存泄漏风险。
动态拼接 CSS 自定义属性名时不能用 var() 函数
直接在 CSS 属性名里写 var(--suffix) 是无效的，比如 margin-<var></var> 会解析失败 —— CSS 不支持在属性名位置展开变量。自定义属性名（即带 -- 前缀的名称）必须是静态字符串，浏览器在解析样式表阶段就已锁定，无法运行时计算。
JavaScript 中动态设置 --prefix-1、--prefix-2 类变量名
真正可行的动态命名，发生在 JS 层：用字符串拼接构造完整属性名，再通过 element.style.setProperty() 设置。关键点是「先拼串，再设值」，不是让 CSS 自己拼。
- 错误写法：
el.style.setProperty('--item-delay-' + index, '0.2s')看似对，但若index是undefined或null，会生成--item-delay-undefined这种非法名，后续读取或继承都失效 - 推荐写法：用模板字面量并做基础校验，例如
const key = `--item-delay-${Math.max(0, parseInt(index) || 0)}`，再调用el.style.setProperty(key, '0.2s') - 注意作用域：设在
:root上要用document.documentElement.style.setProperty()；设在某个元素上，就用该元素的style.setProperty()
为什么不能在 CSS 里用 calc() 或 attr() 拼属性名
calc() 只能用于属性值（如 width: calc(var(--base) * 2)），不参与属性名解析；attr() 仅限于伪元素的 content 属性，且只读 HTML 属性值，和 CSS 自定义属性名完全无关。试图绕过语法限制去“动态生成属性名”，本质是误解了 CSS 的声明式执行模型。
批量管理动态变量时容易忽略的作用域泄漏
如果在循环中反复对同一个元素设置不同前缀的变量（如 --hover-scale-1、--hover-scale-2），但没清理旧值，会导致该元素的 style 对象持续膨胀，既浪费内存，又可能干扰后续 CSSOM 查询（例如 getComputedStyle(el).getPropertyValue('--hover-scale-3') 返回空字符串，并非因为未定义，而是该属性根本没被设过）。
建议：明确变量用途边界，用固定前缀 + 可控后缀（如只允许 1 到 5），或改用单个数组式变量（--hover-scales: "1.0,1.2,1.4"）配合 JS 解析，避免无序扩散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
