路由切换后旧CSS仍生效的根源是CSS未随组件卸载，需用CSS Modules+路由独占样式文件+disabled控制启用状态来实现真正隔离。
路由切换后旧 CSS 仍在生效，不是 BEM 写错了
这不是样式写得不规范，而是 CSS 没随组件生命周期卸载。比如从 /dashboard 切到 /settings，控制台看不到报错，但 .dashboard__chart 的样式还在影响 settings 页面的图表渲染——根源是构建工具把所有 CSS 当作全局资源注入了 ，没和路由组件绑定。
Vite/Webpack 默认不卸载 CSS，得靠模块化+手动控制
开箱即用的 import './Dashboard.module.css' 只保证类名局部化，不保证样式随组件销毁。要真正隔离：
- 必须用 CSS Modules（如 Vite 中启用
css.modules: { generateScopedName: '[name]__[local]___[hash:base64:5]' }） - 每个路由独占一个
.module.css文件，且文件名、目录名、顶层block名三者一致（如src/routes/Dashboard/Dashboard.module.css中只允许出现.dashboard开头的类） - 禁止在路由级 CSS 里写
.button、.modal这类通用类——它们该属于原子组件，走独立引入
动态路由参数导致修饰符爆炸？别拼字符串，用静态白名单
写 class="user-profile__avatar--size-${size}" 看似灵活，实则让 PurgeCSS 无法识别变量值，只能保留所有 --size-* 规则，CSS 体积暴涨；DevTools 里也搜不到定义位置。
- 在
UserProfile.module.css中只定义固定类：.user-profile__avatar--size-sm、--size-md、--size-lg - JS 中调用前校验：
const validSizes = ['sm', 'md', 'lg']; size = validSizes.includes(size) ? size : 'md'; - 避免生成无效类名如
user-profile__avatar--size-xl，防止 DOM 中残留无样式的节点
卸载 CSS 的本质是控制注入时机，不是删
有人用 document.getElementById('theme-css').remove() 再插入新 ，这会触发重排、加载延迟、甚至样式错乱。真正可控的方式是：
- 预置所有皮肤/路由 CSS 在 HTML 中，统一用
disabled控制启用状态 - 切换时只操作属性：
lightLink.disabled = true; darkLink.disabled = false; -
disabled是纯样式层开关，不发请求、不改 DOM、无重排，IE9+ 全支持 - 路径必须用根相对路径（如
/css/routes/dashboard.css），否则部署到子目录时 404
卸载无用 CSS 的关键，从来不在“删”，而在“不加载”或“不启用”。容易被忽略的是：CSS 注入方式比类名命名更能决定样式是否真正隔离——哪怕 BEM 写得再标准，只要样式没和路由组件生命周期对齐，就一定会泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
