应避免在 :root 中定义多角色变量，而应为每个角色创建独立 CSS 作用域，通过 data-role 属性配合属性选择器定义变量，并确保其位于样式表顶部、统一单位格式、显式声明所有变量以支持无闪烁切换。
直接改 :root 不适合多角色共存场景
很多开发者一上来就往 :root 里塞角色变量，比如 --user-role: "admin"，再用 if 式 CSS（实际并不存在）去分支渲染——这行不通。CSS 没有运行时条件逻辑，:root 是全局单例，所有角色变量写在一起会互相覆盖或失效。
真正可行的路径是：**让角色成为 CSS 作用域的起点**。不是靠一个变量值判断身份，而是为每个角色创建独立的样式容器节点。
- 给
<body>或最外层包裹元素动态加data-role="editor"、data-role="viewer"这类属性 - 所有角色专属变量定义在对应属性选择器下，例如
[data-role="editor"] { --primary-color: #2563eb; } - 确保业务组件的样式规则都基于
var(--primary-color)，而非硬编码色值
[data-role] 选择器必须前置在所有依赖它的规则之前
顺序错了，变量就“看不见”。浏览器解析 CSS 是从上到下，如果 [data-role="admin"] { --bg-header: #1e40af; } 写在按钮样式后面，那按钮里 background-color: var(--bg-header) 会 fallback 到继承值或初始值，而不是你设的那个深蓝。
- 把所有角色变量块统一放在全局样式表最顶部，或单独抽成
roles.css并<link>在其他样式之前 - 避免在
@media或嵌套预处理器中定义角色变量——它们可能被提升或打乱顺序 - 用浏览器 Elements 面板检查
<html>或<body>是否真有data-role属性，且对应选择器已生效
变量值别带单位，但引用时得补上
比如定义 --spacing-sm: 4 而不是 --spacing-sm: 4px。这样既能用于 margin: calc(var(--spacing-sm) * 1px)，也能参与 font-size: calc(var(--spacing-sm) * 2px) 这类计算；如果带了单位，calc(var(--spacing-sm) + 2px) 会直接报错。
立即学习“前端免费学习笔记（深入）”；
- 颜色、阴影、渐变等直接可用字符串值，如
--text-primary: #1f2937 - 字体大小、间距、圆角等数值型变量，统一存纯数字，使用时再拼单位
- 布尔类控制（如是否启用玻璃态）用
0/1，配合opacity: var(--glass-enabled)或backdrop-filter: blur(calc(var(--glass-blur) * 1px))
角色切换时，只换属性，不重载样式表
用户从 editor 切到 reviewer，不要删掉旧 <style> 再插入新一套——这会导致样式闪烁、动画中断、伪类状态丢失。正确做法是只更新 DOM 属性：
- JS 中执行
document.body.setAttribute('data-role', 'reviewer') - 确保所有角色变量已在初始 CSS 中定义完整，切换只是激活不同分支
- 如果角色需携带额外上下文（如租户 ID、权限等级），用多个属性组合：
data-role="admin" data-tenant="acme"，对应 CSS 选择器写成[data-role="admin"][data-tenant="acme"]
最容易被忽略的是：角色变更后，var() 的 fallback 值不会自动更新。比如 color: var(--text-role, #6b7280)，当 --text-role 在新角色下未定义，就会卡在 fallback 上——务必保证每个角色分支都显式声明所有用到的变量，哪怕只是继承默认值。
