如何使用data-type属性动态调用CSS自定义属性减少重复样式代码

你期望的动态拼接变量名的写法暂时无法在纯原生CSS中实现。
原因是CSS当前的attr()函数仅支持在content属性中使用，暂不支持用于属性值的字符串拼接，原生CSS也没有提供变量名动态插值的语法，你示例的var(--#{attr(data-type)}-bg)写法无法被原生CSS解析。

可行的原生CSS替代方案 #

如果你希望减少重复代码，不需要预处理器也可以通过变量中转的方式简化写法，仅需要修改少量CSS规则：

:root{
  --warning: rgb(230, 126, 34);
  --warning-bg: rgba(230, 126, 34, 0.1);
  --important: rgb(52, 152, 219);
  --important-bg: rgba(52, 152, 219, 0.1);
  --caution: rgb(231, 76, 60);
  --caution-bg: rgba(231, 76, 60, 0.1);
}

[data-type]{
  padding: 12px;
  margin: 12px;
  /* 公共规则直接使用通用中转变量 */
  background-color: var(--type-bg);
  border: 1px solid var(--type-color);
}

/* 每个类型仅需给中转变量赋值，无需重复写样式属性 */
[data-type="warning"]{
  --type-color: var(--warning);
  --type-bg: var(--warning-bg);
}
[data-type="important"]{
  --type-color: var(--important);
  --type-bg: var(--important-bg);
}
[data-type="caution"]{
  --type-color: var(--caution);
  --type-bg: var(--caution-bg);
}

该方案兼容所有支持CSS自定义属性的现代浏览器，不需要修改现有HTML结构，相比你原来的写法可以减少大量重复的属性声明。

完全动态适配的可选方案（需少量JS） #

如果你的data-type取值完全来自外部数据源，无法提前枚举所有类型写CSS规则，可以加极少量JS辅助实现完全动态匹配，不需要为新增类型修改CSS：

// 遍历所有带data-type的元素，动态注入中转变量
document.querySelectorAll('[data-type]').forEach(el => {
  const type = el.dataset.type
  el.style.setProperty('--type-color', `var(--${type})`)
  el.style.setProperty('--type-bg', `var(--${type}-bg)`)
})

此时CSS仅需要保留公共的[data-type]规则即可，后续新增类型只需要在:root中添加对应颜色变量就可以自动适配。

内容的提问来源于stack exchange，提问作者PsyGik