路由级CSS必须绑定具体Block并物理隔离，禁止通用类名；采用CSS Modules+命名一致+静态修饰符+按需注入，确保BEM类名全程不脱钩上下文。
路由级CSS文件必须绑定到具体Block，不能只写通用类名
SPA里路由切换时样式错乱，往往不是BEM写得不对，而是CSS文件和路由没形成明确映射。比如Dashboard.css里写了.card或.title，它就会污染所有用到相同类名的其他路由页面——BEM的语义隔离从第一步就失效了。
正确做法是让每个路由专属CSS只声明一个顶层block，且文件名、目录名、block名三者一致：
-
src/routes/Dashboard/Dashboard.module.css里只允许出现.dashboard、.dashboard__header、.dashboard--loading - 禁止出现
.button、.modal这类跨路由复用的类——它们该属于独立原子组件，走组件级CSS引入 - 构建工具（Vite/Webpack）需配置
css.modules: { generateScopedName: '[name]__[local]___[hash:base64:5]' }，确保className={styles.dashboard__header}不会裸奔成全局
动态路由参数导致BEM类名不可预测？用静态修饰符替代拼接
常见错误是写class="user-profile__avatar--size-${size}"，其中size来自URL参数或API响应。PurgeCSS扫不到变量值，只能保守保留所有--size-*规则，CSS体积暴涨；更糟的是，DevTools里搜user-profile__avatar--size-large根本找不到定义。
解决思路是把运行时变量转为编译期可枚举的修饰符集合：
立即学习“前端免费学习笔记（深入）”；
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 在
UserProfile.module.css中只定义.user-profile__avatar--size-sm、--size-md、--size-lg三个固定类 - JS中用
cn('avatar', `size-${size}`)调用前，先校验size是否在['sm', 'md', 'lg']白名单内 - 若遇到未定义尺寸（如
xl），降级为--size-md而非拼出无效类名，避免DOM中残留无样式的user-profile__avatar--size-xl
路由切换后旧样式未卸载？问题不在BEM而在CSS注入方式
控制台看不到报错，但切到/settings页时/dashboard的.dashboard__chart样式还在生效——这不是BEM失效，是CSS被当作全局资源注入，没随路由组件生命周期销毁。
关键要区分注入时机：
- Vue单文件组件：必须用
<style module></style>，<style scoped></style>仅加属性选择器，无法阻止外部CSS通过[data-v-xxx]匹配覆盖 - React + CSS Modules：确保
import './Dashboard.module.css'写在组件文件内，且构建配置启用css-loader?modules；禁用import 'global.css'这种全局引入 - 使用
qiankun微前端时：Dashboard子应用的CSS必须由其自身loadScript注入，主应用不能提前import其样式，否则卸载子应用后样式仍驻留
BEM类名在路由间重复怎么办？靠命名空间不如靠物理隔离
两个路由都用了.form开头的block，比如LoginForm和ResetPasswordForm，即使都遵循BEM，.form__input仍会因同名产生样式冲突——浏览器不认“这是哪个form”，只看最终类名字符串。
此时BEM本身已无能为力，必须叠加作用域隔离手段：
- 强制启用CSS Modules，让
LoginForm.module.css里的.form__input编译成login-form__input_abc123，彻底脱离全局符号表 - 若必须保留全局CSS（如对接遗留系统），给每个路由根容器加唯一ID：
<div id="login-route">...</div>，所有样式前置该ID：#login-route .form__input { ... } - 第三方UI库（如Ant Design）的类名无法改写，必须用
::global(.ant-btn)显式包裹，并在对应路由CSS中重置关键属性，避免被其他路由的同名规则穿透
真正难的不是写出block__element--modifier，而是让这个字符串在构建、注入、卸载、复用每个环节都不脱离它所声明的上下文。一旦脱钩，BEM就只剩一层薄薄的命名外壳。
