CSS模块化如何实现局部作用域控制

CSS Modules 通过编译时自动重命名类名实现真正可靠的样式局部作用域，无需运行时开销、不依赖特定框架或浏览器特性，兼容 React/Vue/Svelte 等各类前端技术栈；它要求文件名以 `.module.css` 结尾、构建工具（如 Webpack/Vite/Next.js）正确配置模块化支持，并在 JavaScript 中通过对象解构方式使用类名，同时需注意伪元素、动画、继承重置等易被忽视的细节——对于追求轻量、稳定与工程普适性的项目，CSS Modules 是比 scoped style 或 CSS-in-JS 更优的局部样式基石方案。

如何用 CSS Modules 实现页面局部样式

CSS Modules 是目前最主流的局部样式方案，它通过编译时重命名类名，让样式天然具备作用域隔离。关键不是“怎么写 CSS”，而是“怎么让构建工具处理它”。

使用前确认你的项目已配置支持 CSS Modules 的 loader（如 Webpack 的 css-loader 开启 modules: true）；Vite 和 Next.js 默认已支持，但需文件名带 .module.css 后缀。

• 文件必须命名为 Button.module.css（不能是 Button.css），否则不会启用模块化
• 在 JS 中导入时，得到的是一个对象：import styles from './Button.module.css'，类名需通过 styles.primary 访问
• 不支持全局选择器嵌套（如 :global(.icon) { ... } 需显式声明，且仅用于穿透场景
• 动态类名要拼接正确：className={`${styles.btn} ${props.disabled ? styles.disabled : ''}`，空字符串会生成多余空格，建议用 clsx 库

为什么不能直接用 scoped（Vue）或 :host（Shadow DOM）

这些方案依赖特定框架或浏览器能力，不具备通用性。比如 Vue 的