直接改style属性只影响当前元素且无法复用，应使用class控制样式；dom操作阶段推荐classlist api安全切换类；主题切换宜结合模板变量与css变量；避免动态插入style标签。
直接改 style 属性只影响当前元素，且无法复用
如果你在 HTML 模板里写 <div style="color: red; font-size: 14px">，那这个样式就锁死在这个标签上。后续想统一调成蓝色？得逐个改所有 <code>style 属性——模板里有多少个，你就得改多少次。更麻烦的是，这类内联样式优先级太高，会盖掉 CSS 文件里用 !important 写的兜底规则，反而让调试变难。
真正适合模板场景的做法是：把样式逻辑从 HTML 标签里抽出来，靠 class 控制。比如模板中写 <div class="card {{ statusClass }}">，然后在 JS 或后端渲染时动态注入 <code>statusClass 的值（如 "card--success" 或 "card--error"），CSS 文件里提前定义好这些类。这样改样式只动一处 CSS，所有用到该模板的地方自动生效。
classList 是模板中安全切换样式的唯一推荐方式
在模板渲染后的 DOM 操作阶段（比如用户点击触发状态变化），别用 element.className = "new-class"，它会清空所有已有 class。你应该用 classList API：
-
element.classList.add("active")—— 只加不删 -
element.classList.remove("disabled")—— 只删不加 -
element.classList.toggle("expanded")—— 存在则删，不存在则加 -
element.classList.replace("old", "new")—— 安全替换，不影响其他 class
尤其注意：模板里如果已有多个 class（如 class="btn btn-primary js-trigger"），用 className 赋值会直接抹掉 js-trigger，导致事件监听失效。而 classList 完全避开这个问题。
模板引擎变量注入 + CSS 变量（--前缀）可实现主题级实时切换
当你要支持深色/浅色主题、多品牌配色等全局样式变更时，硬编码 class 名或反复操作 classList 效率太低。正确路径是结合两层机制：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在模板中使用变量控制根节点 class，例如：
，服务端或构建时注入themeClass="theme-dark" - 在 CSS 中用
:root定义变量：:root { --primary-color: #007bff; }，再用.theme-dark:root { --primary-color: #0d6efd; } - 组件样式直接引用变量：
.button { background-color: var(--primary-color); }
这样改主题只需换一个 class，所有依赖变量的组件自动响应，无需遍历 DOM 或重写 JS 逻辑。但要注意：CSS 变量不能用于媒体查询条件判断，也不能被 getComputedStyle 在伪元素中读取。
动态插入 <style></style> 标签容易污染全局作用域
有些模板方案会在 JS 里创建 style 元素并注入 CSS 字符串，比如：document.head.appendChild(styleEl)。这看似灵活，实际隐患很大：
- 每次插入都新增一条
<style></style>，没做清理的话，页面越久 style 标签越多 - 规则无命名空间，可能意外覆盖第三方组件的样式（比如你插了个
.modal { z-index: 9999 }，结果把弹窗库的层级搞乱了） - 服务端渲染（SSR）场景下，JS 还没执行时，这些样式根本不存在，首屏会闪动
除非你明确需要运行时生成高度定制化样式（如图表颜色随数据动态计算），否则一律避免。模板级样式修改，始终优先走 class + 外部 CSS 文件的组合路径。
模板里改样式不是“怎么让它变”，而是“怎么让它变得可控、可维护、不打架”。最常被忽略的点是：class 名的语义粒度和 CSS 变量的作用域边界。一个叫card--loading 的类比 loading 更安全，因为它天然限定在 card 组件内；而把 --card-bg 放进 .card 选择器里，比扔进 :root 更不容易误影响其他模块。
