CSS自定义属性是原生运行时变量，以--开头、var()引用，支持动态修改和继承；而class是静态样式类名，无变量功能，无法运行时批量更新。
什么是CSS自定义属性，和普通class有什么区别
CSS自定义属性（又称CSS变量）是原生支持的运行时可变样式机制，用--primary-color这类命名方式声明，通过var(--primary-color)引用。它和写死的.tenant-a .btn { color: #0066cc; }有本质不同：后者需要预编译多套CSS文件或动态注入style标签，而自定义属性允许在不重载样式表的前提下，仅通过修改根节点或容器上的属性值，批量更新所有依赖该变量的样式。
关键在于作用域和继承性——自定义属性遵循CSS继承规则，设置在:root上全局可用，设在某个.tenant-b容器上则只影响其子元素，这天然适配租户隔离场景。
如何为每个租户动态注入自定义属性值
租户样式定制的核心不是“写多少套CSS”，而是“在哪、以什么方式把变量值塞进去”。常见可靠做法有三种：
- 在HTML
<html>或<body>标签上直接写内联style，例如：<html style="--primary-color: #ff6b35; --font-size-base: 14px;">。适合构建时已知租户信息，且无需JS干预。 - 服务端渲染时，根据租户ID从配置中心读取主题色、字体等JSON，拼成
style字符串注入到模板中。避免前端请求额外配置接口，首屏无闪烁。 - 前端加载租户配置后，用
document.documentElement.style.setProperty('--primary-color', '#2a9d8f')动态设置。注意：必须确保样式规则已加载完成，否则var()会回退到fallback值。
不要在JS里反复调用setProperty去逐个改几十个变量——应把租户主题封装成一个对象，一次性遍历设置。
立即学习“前端免费学习笔记（深入）”；
怎么写CSS规则才能让变量真正生效且不崩溃
光有var(--color)不够，很多样式失效是因为没处理回退值或类型兼容问题：
- 所有
var()必须带fallback，例如color: var(--primary-color, #007bff);。否则变量未定义时，整条声明会被浏览器忽略（不是用默认值，是直接丢弃），按钮可能变透明。 - 颜色、尺寸、阴影等不同语义的变量要分开命名，避免混用：
--header-bg和--header-height不能共用同一个变量名，否则height: var(--header-bg)会解析失败并静默失效。 - 不要在
@media查询内部重新定义同名变量，比如@media (max-width: 768px) { :root { --font-size-base: 12px; } }——这会覆盖全局值，导致桌面端也变小。正确做法是在租户容器上加媒体查询类，再设对应变量。 - 避免在
calc()里直接嵌套未定义变量：width: calc(var(--sidebar-width) - 20px)若--sidebar-width为空，整个表达式无效。应写成width: calc(var(--sidebar-width, 240px) - 20px)。
遇到“变量变了但样式没更新”该怎么排查
这种问题几乎都出在作用域或计算时机上：
- 检查变量设置的位置是否被更宽泛的选择器覆盖，例如你在
.tenant-c上设了--primary-color，但某条全局button { color: var(--primary-color); }规则匹配到了按钮，而按钮不在.tenant-c内部——那就不会生效。 - 使用浏览器开发者工具的Computed面板，点开某元素的
color属性，看右侧“used value”显示的是变量名还是实际颜色值；如果是变量名，说明没解析成功，点开旁边的var(--x)链接，能直接跳转到该变量定义处。 - 动态设置后样式没变？确认是否在DOM就绪后才执行
setProperty，尤其避免在DOMContentLoaded之前操作document.documentElement。 - 如果用了CSS-in-JS库（如Emotion、Styled Components），它们可能把自定义属性转成内联style或scoped class，和原生
var()行为不一致——此时优先走库自身的主题机制，别混用。
租户样式定制真正的复杂点不在声明变量，而在确保变量值在正确时间、正确作用域内被消费；一旦漏掉一个fallback或写错一个选择器层级，样式就会悄无声息地退化。
