直接用html元素class控制主题更稳更快更易维护，因零网络请求、毫秒级生效、支持transition动画、变量统一且新增品牌只需加class块；而改link.href需HTTP加载、缓存难控、易索引错乱、CORS静默失败且无法平滑过渡。
直接用 html 元素 class 控制主题，比切换 <link rel="stylesheet"> 更稳、更快、更易维护。
为什么不用动态改 link.href 切换品牌样式
改 href 看似直观，但实际踩坑多：每次切换都要发一次 HTTP 请求，加载延迟明显；缓存控制麻烦（?v= 时间戳不总生效）；多个品牌共存时容易索引错乱（比如用 shift() 导致数组变空）；CORS 跨域样式表会静默失败，控制台只报 Cross-Origin Stylesheet，没 JS 异常难定位。
更关键的是：品牌切换不是“换文件”，而是“换视觉语义”——主色、字体、间距、图标风格等需整体协同，靠多个独立 CSS 文件很难保证变量级一致性。
- 浏览器对并行加载多个 CSS 文件无优先级控制，样式可能闪动或错序应用
-
disabled=true方案虽比删 DOM 好，但仍要等新样式 load 完才启用，中间有空窗 - 无法做平滑过渡动画（CSS 变量可
transition，外链 CSS 不行）
推荐结构：html class + CSS 变量分层
所有品牌样式写在一个 CSS 文件里，用 :root 定义基础变量，再用 .brand-a、.brand-b 等 class 覆盖变量值。JS 只负责切 document.documentElement.className。
立即学习“前端免费学习笔记（深入）”；
示例结构：
/* styles.css */
:root {
--primary-color: #007bff;
--font-family: -apple-system, sans-serif;
--logo-src: url(./logos/default.svg);
}
.brand-a {
--primary-color: #28a745;
--logo-src: url(./logos/brand-a.svg);
}
.brand-b {
--primary-color: #dc3545;
--logo-src: url(./logos/brand-b.svg);
}
body { background-color: var(--primary-color); }
.logo { background-image: var(--logo-src); }切换只需一行 JS：
document.documentElement.className = 'brand-b';
- 零网络请求，毫秒级生效
- 支持
transition动画（如transition: background-color 0.2s） - 变量命名统一，避免重复定义颜色/尺寸/断点
- 新增品牌只需加一个 class 块，不改 HTML 或 JS 逻辑
如何处理图片、图标等静态资源路径
CSS 变量能接 url()，但注意路径是相对于 CSS 文件位置解析的，不是 HTML。如果品牌 logo 放在不同目录，别硬编码路径，用变量拼接：
.brand-a { --logo-dir: './logos/a'; }
.brand-b { --logo-dir: './logos/b'; }
.logo { background-image: url(var(--logo-dir) + '/logo.svg'); }但注意：CSS 里 var() 不能用于 url() 的一部分（Chrome 110+ 支持，旧版不兼容）。更稳妥的做法是：
- 所有品牌资源放在同一级目录，用命名区分：
logo-brand-a.svg - JS 动态设
data-brand属性，CSS 用属性选择器：[data-brand="a"] .logo { background-image: url(./logos/a.svg); } - 图片标签本身用 JS 切换：
img.src = brandConfigs[currentBrand].logo
别依赖 @import 或内联 style 标签——前者阻塞渲染，后者难复用且破坏样式隔离。
持久化与初始化时机
用户选的品牌必须存 localStorage，但读取和应用不能放在 window.onload 后——FOUC（Flash of Unstyled Content）明显。正确顺序：
- HTML 中
<html class="brand-default">设默认品牌 - JS 在
<head>里立即执行：读localStorage→ 覆盖className→ 触发重绘 - 按钮点击后，同步更新
localStorage和className
特别注意：服务端渲染（SSR）场景下，需在 HTML 输出前注入正确 class，否则首屏仍是默认品牌。
最后一点容易被忽略：品牌切换后，第三方组件（如日期选择器、图表库）的样式未必响应 CSS 变量。要么封装一层 wrapper 统一注入 class，要么用 JS 监听 class 变更并手动刷新这些组件实例。
