HTML代码质量在多租户场景下依赖属性职责隔离、渲染链路校验与缓存维度拆分三者协同；禁止用data-*或class/id传递租户上下文参与业务逻辑，必须由服务端注入并配合Vary响应头与细粒度缓存。
多租户场景下，HTML 代码质量不是靠“写得漂亮”来保障的，而是靠**属性职责隔离 + 渲染链路校验 + 缓存维度拆分**三者协同。任何把租户信息塞进 class、id 或 data-tenant-id 并让 JS 读取后做逻辑分支的做法，都会在上线后某天凌晨三点爆出越权或缓存污染问题。
data-* 属性只能用于调试或主题，不能参与路由或权限判断
你看到的 data-tenant-slug="acme" 如果出现在 SSR 输出里，它唯一安全用途是供 DevTools 查看或 CSS 变量注入（如 style="--tenant-primary: #2563eb;"）。一旦 JS 用它拼接 API 地址、切换功能开关、甚至控制按钮显隐，就等于把租户上下文交给了用户。
- 禁止：
fetch(`/api/${tenantSlug}/users`)——tenantSlug必须来自服务端线程上下文，而非 DOM 属性 - 允许：
document.body.setAttribute('data-theme', tenantTheme)，仅影响 CSS 变量，不触发任何 fetch 或事件绑定 - 危险信号：Chrome 控制台改一行
data-tenant-slug就能加载其他租户数据 → 说明前端正在依赖该值做业务逻辑
class 名必须语义化且无权限含义，租户差异走 CSS 变量隔离
写 class="theme-acme" 没问题，但写 class="can-delete-order" 或 id="user-list-acme" 是硬伤。前者会让样式表膨胀到无法维护，后者会让 JS 事件监听器误判租户边界。
- 正确做法：CSS 中用
.theme-acme { --primary-color: #1e40af; }，HTML 里只写class="theme-acme user-list" - 错误做法：为每个租户写 200 行专属 CSS 规则，或用
document.querySelector('#user-list-acme')绑定删除逻辑 - 性能提醒：单个元素 class 字符串超过 200 字符、或平均含 8+ 个租户相关 class 时，浏览器重排耗时会明显上升
SSR 模板中必须注入 Vary: Tenant-ID 响应头，禁用静态 HTML 缓存
CDN 或反向代理缓存了带 data-tenant-slug="acme" 的 HTML？那下一个请求 tenant-slug="beta" 的用户大概率看到的是 Acme 的 logo 和按钮文案——这不是 bug，是缓存配置漏掉了租户维度。
立即学习“前端免费学习笔记（深入）”；
- 必须做：Nginx / Spring Cloud Gateway 在响应头中添加
Vary: Tenant-ID或Vary: X-Tenant-ID - 必须禁用：对
/dashboard这类路径启用Cache-Control: public, max-age=3600—— 它和租户无关，但实际内容强相关 - 替代方案：缓存粒度下沉到片段级，比如只缓存
<footer>，且 key 中包含tenant_slug和locale两个变量
真正难的不是怎么写 HTML，而是当运营同学说“给 Acme 租户加个红色 banner”时，你得立刻判断：这个需求该走 CSS 变量注入、还是 CMS 配置下发、还是网关 Header 注入 —— 而不是随手加个 class="acme-banner" 然后等三个月后被安全审计打回来。
