CSS Modules通过构建时自动重命名类名实现样式作用域隔离，避免全局污染；需命名为xxx.module.css并用styles.xxx引用，不可字符串拼接，配合命名空间和全局样式分离可增强隔离性。
避免 CSS 样式全局污染的核心思路是“作用域隔离”——让样式只在当前组件内生效，不意外影响其他组件。CSS Modules 是目前最主流、最轻量且无需构建强依赖的方案之一，它通过自动重命名类名实现局部作用域。
什么是 CSS Modules？
CSS Modules 不是一种新语法，而是一种构建时的转换策略：把你在 .module.css 文件中写的类名（如 .button），编译后自动变成带哈希的唯一标识（如 Button_button__abc123），并仅在对应组件中注入和使用。这样即使多个组件都定义了 .title，它们实际生效的类名也互不冲突。
如何启用并使用 CSS Modules
多数现代前端工具链（Vite、Webpack、Next.js 等）默认支持，只需将样式文件命名为 xxx.module.css（或 .module.scss/.module.less）即可自动启用。
- 写法示例：
Button.module.css：.root { padding: 8px 16px; background: #007bff; }
.disabled { opacity: 0.5; cursor: not-allowed; } - 在 React 组件中导入并使用：
import styles from './Button.module.css';
function Button({ disabled }) {
return (
);
} - 注意：不能用字符串拼接动态类名（如 className="root"），必须通过 styles.root 引用，否则无法被模块化处理。
配合其他策略增强隔离性
CSS Modules 解决了类名冲突，但对全局选择器（如 h1、body）、CSS 变量或 @keyframes 仍无约束力，需额外注意：
立即学习“前端免费学习笔记（深入）”；
- 避免在 module 文件中写全局选择器；若需重置或基础样式，统一放在非 module 的全局 CSS（如 index.css）中管理。
- CSS 自定义属性（变量）默认仍是全局的，建议加命名空间前缀，例如：
:root {
--myapp-primary-color: #007bff;
} - @keyframes 动画名也会被模块化（Vite/Webpack 支持），但需确保动画名也通过 styles.animationName 引用，而非字符串字面量。
替代/补充方案简要对比
除 CSS Modules 外，还有几种常见隔离方式：
- CSS-in-JS（如 styled-components、Emotion）：样式即组件，天然作用域封闭，支持动态样式，但运行时开销略高、服务端渲染需额外配置。
- Shadow DOM：浏览器原生封装，样式完全隔离，适合 Web Components，但在普通 React/Vue 项目中接入成本高、兼容性需考虑。
- BEM 命名规范 + 手动前缀：低成本，靠约定避免冲突，但无法杜绝误用，维护压力随项目增大而上升。
CSS Modules 在零配置、低侵入、高可读和构建期安全之间取得了很好平衡，是中大型项目模块样式的推荐起点。
