CSS变量不能响应伪类变化或处理选中逻辑，必须由JavaScript维护状态并动态设置变量值；应按规格语义化命名变量、在组件内定义局部作用域，并用element.style.setProperty()精准控制。
CSS变量本身不能处理选中状态或用户交互，必须配合JavaScript控制。它只负责“视觉反馈”的动态更新，比如颜色、边框、尺寸变化——真正的“选中逻辑”得由JS维护状态，再把状态映射为CSS变量值。
为什么不能只靠 :checked + CSS变量？
原生复选框（<input type="checkbox">）的 :checked 伪类无法直接驱动自定义属性（--selected），因为CSS变量不响应伪类变化。你写 input:checked { --selected: 1; } 是无效的——浏览器会忽略这类声明。
常见错误现象：
- 样式没变化，以为变量写错了，反复检查
var(--x)拼写 - 用
:root定义变量后，在组件内部覆盖失败，实际是作用域没理清 - 多个规格（如“颜色+尺寸”）联动时，变量名冲突，比如都叫
--active-color
element.style.setProperty() 是最可控的更新方式
电商多规格场景（如“红色+XL”、“蓝色+M”）需要独立追踪每个规格项的选中状态，并实时反映到对应DOM节点上。这时应直接操作元素的 style 属性：
立即学习“前端免费学习笔记（深入）”；
- 给每个规格项（如
<button class="spec-item" data-spec="color" data-value="red">）绑定点击事件 - 点击时调用
btn.style.setProperty('--is-selected', '1')，同时清除同组其他项的该变量 - CSS里用
button[var(--is-selected='1')] { ... }写样式（注意：这是属性选择器语法，不是变量函数）
示例片段：
button {
border: 2px solid #ddd;
background: #f9f9f9;
}
button[var(--is-selected='1')] {
border-color: #e74c3c;
background: #fff;
font-weight: bold;
}
避免变量名污染：按规格维度命名
多个规格并存时，别用泛化的 --selected，否则颜色项和尺寸项会互相覆盖。推荐用语义化前缀：
-
--color-selected仅用于颜色按钮 -
--size-selected仅用于尺寸按钮 - 如果某规格支持多选（如“可选多个配件”），改用
--accessory-count存数值，便于做计数徽标
这样即使同一页面有5个规格模块，变量也不会越界生效。关键点在于：CSS变量的作用域由声明位置决定，:root 下全局变量慎用，优先在组件容器上定义局部变量。
性能与兼容性提醒
频繁调用 setProperty() 不会造成性能问题（现代浏览器已优化），但要注意：
- IE11 不支持 CSS 变量，若需兼容，得 fallback 到 class 切换（如
btn--selected） - 用
transform: scale()做选中动画比改width/height更高效 - 不要在循环中连续读写同一变量（如先
getPropertyValue()再setProperty()），可能触发强制同步布局
真正容易被忽略的是：用户取消选中某个规格后，是否清除了对应变量值？很多实现只设 '1'，却不设回 '' 或 '0'，导致后续逻辑误判——这属于状态管理漏洞，不在CSS变量能力范围内，得靠JS兜底。
