CSS Modules 的做法很直接：编写时写 .btn，打包后类名变成 .btn_x7y3k2，组件里引用编译后的名字，团队里再多人同时写 .btn 也互不影响，从机制上就实现了样式作用域隔离。它在 React 生态里最常见，create-react-app、Next.js 等脚手架约定 .module.css 后缀即可开箱即用，不需要额外配置。
相比 BEM 靠命名约定自律，CSS Modules 靠工具强制隔离，团队不用再开会争论前缀规范；相比 CSS in JS 它没有运行时开销，样式仍然是纯静态文件。代价是和 JS 组件绑定较深，动态拼接类名要写 styles 对象取值，跨组件复用样式不如全局 CSS 直观。Vue 的 scoped 是同一思想的不同实现，原理是给元素加唯一属性选择器。
/* Button.jsx —— CSS Modules 的用法 */ import styles from './Button.module.css'; function Button() { /* 编译后 class 变成 button_1x2y3 之类唯一名 */ return <button className={styles.button}>局部作用域按钮</button>; }