动态生成的样式表不能模块化，真正可模块化的是CSS代码组织方式；模块化管理指运行时按需加载、注入、卸载已模块化的CSS内容，而非将link或style元素当作模块。
动态生成的样式表本身不能“模块化”，真正能模块化的只有 CSS 代码组织方式。所谓“CSS 模块化管理动态生成的样式表”，本质是：在运行时按需加载、注入、卸载已模块化的 CSS 内容（如 CSS Modules 文件、Sass partials 或 JSS 规则），而非把 <link> 或 <style> 元素本身当成模块。
动态加载时如何避免重复插入同一份 CSS
浏览器不会阻止重复插入相同 href 的 <link>，但 DOM 中会多出冗余节点，且可能触发多次 onload 回调。
- 每次插入前用
document.querySelector('link[href="xxx"]')查重，存在就跳过 - 若路径含查询参数（如主题色变量），需统一标准化 URL（例如用
new URL(url, document.baseURI).href） - 对内联
<style>，务必加id或data-plop-id属性，方便后续定位移除 - 服务端返回的 CSS 文件需设置正确缓存头（
Cache-Control: no-cache或带 hash 的文件名），否则更新后仍加载旧版
Vue/React 中动态启用 scoped 或 CSS Modules 样式
框架级作用域（如 Vue 的 scoped 或 React 的 CSS Modules）在构建时编译，无法在运行时“开启”或 “关闭”。所谓“动态启用”，实际是切换已预编译好的模块化样式集合。
- Vue 单文件组件中，
<style scoped>的哈希类名在构建时固化，运行时只能通过v-if控制组件是否渲染，从而间接控制样式是否生效 - React + CSS Modules 场景下，动态加载的是已打包好的
Button.module.css对应的 JS 对象（含哈希类名映射），不是原始 CSS 文本 - 不要试图在运行时把字符串 CSS 注入并期望它自动获得 scoped 行为——它只会成为全局样式
用 JSS 或 emotion 实现真·动态样式生成
这类 CSS-in-JS 方案才是运行时真正动态的：样式规则由 JS 对象实时计算生成，并注入唯一类名的 <style> 标签。
立即学习“前端免费学习笔记（深入）”；
- JSS 支持
createUseStyles钩子，可接收 props 并返回样式对象，例如：color: props.dark ? '#000' : '#fff' - emotion 的
css模板函数支持插值，且会自动去重相同规则，避免重复注入 - 注意：JSS 默认不处理 SSR 样式水合，服务端渲染需配合
jss-server插件导出样式字符串 - 所有动态生成的样式都依赖于 JS 执行时机——若元素先渲染、样式后注入，会出现闪屏；建议在组件挂载前完成样式注册
真正容易被忽略的点是：模块化解决的是“写法”和“作用域”，而动态加载解决的是“何时加载”。两者正交，但混用时必须分清边界——CSS 文件内容可以模块化，但 <link> 标签只是个加载器，它本身没有模块语义。
