解决CSS模块样式互相影响的关键是建立清晰的边界，通过BEM命名规范（如.card__title、card--featured）避免类名冲突，采用CSS Modules实现局部作用域（如Button_primary_abc123），结合CSS自定义属性（如--text-color）和嵌套提升封装性，并按组件拆分样式文件、合理组织目录结构，避免全局污染，确保各模块独立可维护。
当多个CSS模块样式互相影响时，通常是因为选择器作用域不明确或全局样式污染导致的。解决这类问题的核心思路是模块化拆分和降低耦合性，让每个样式模块独立、可维护、互不干扰。
使用BEM命名规范隔离样式
BEM（Block, Element, Modifier）是一种命名约定，通过语义化且唯一的类名避免样式冲突。
- 将组件定义为“块”（Block），如 .card
- 组件内部元素用“元素”表示，如 .card__title
- 状态或变体使用“修饰符”，如 .card--featured
这种命名方式确保类名具有高特异性且不会意外影响其他模块。
采用CSS Modules实现局部作用域
CSS Modules在构建时将类名自动重命名，保证每个模块的样式仅在当前文件内生效。
立即学习“前端免费学习笔记（深入）”；
- 在项目中启用CSS Modules（如Webpack配置
modules: true） - 编写 Button.module.css，其中 .primary 会被编译成类似 Button_primary_abc123
- 在JSX中通过 import styles from './Button.module.css' 使用
这样即使不同模块都定义了 .primary，也不会相互覆盖。
通过CSS自定义属性+嵌套提升封装性
利用现代CSS特性增强模块独立性：
- 在组件根节点上定义作用域内的自定义属性，如 style="--text-color: red;"
- 在本模块样式中使用 color: var(--text-color);
- 结合 :scope 或嵌套规则限制样式范围
这种方式让样式依赖显式声明，减少对外部上下文的假设。
拆分样式文件并按功能组织目录结构
合理的项目结构有助于物理隔离样式模块：
- 按页面或组件划分样式文件，如 components/Button/Button.css
- 公共样式单独放在 styles/ 目录下，仅导出变量或混入
- 避免使用全局通配符或强权重选择器（如 !important）
每个组件只引入自己需要的样式，从架构层面降低耦合。
基本上就这些。关键是建立清晰的边界，让每个CSS模块像独立组件一样运行，互不影响。模块化不是一蹴而就的，但从小处开始实践，长期收益明显。
