css modules中伪类必须与基础类同文件定义，跨文件无效；动态类名须通过styles对象访问，不可拼字符串；复用应采用css变量或js控制，避免破坏模块化。
伪类写法必须放在同一 CSS Module 文件内
CSS Modules 不会跨文件解析 :hover、:active、:focus 这类伪类，哪怕你用 @import 引入另一个模块，伪类绑定也只认当前文件里定义的类名。常见错误是把基础样式和交互样式拆到两个 .module.css 文件里，结果 hover 效果完全不生效。
正确做法是：所有与某个类相关的状态样式，都写在同一个模块文件中：
.button {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
}
.button:hover {
background: #0056b3;
}
.button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
然后在组件中统一通过 styles.button 引入——编译后三者共享同一个哈希后缀，保证作用域一致。
动态切换伪类对应的状态类要走 classes 对象
React 中经常需要根据状态加不同 class，比如 isHovered ? 'item--hover' : 'item'。如果 item--hover 是你在 .module.css 里定义的类，它**必须**通过 classes.itemHover（或类似命名）访问，不能拼字符串。
否则浏览器会尝试匹配一个全局类名 item--hover，而这个类根本没被 CSS Modules 注入到 DOM 中。
容易踩的坑：
- 写了
.item--hover { background: yellow; }却在 JSX 里写className={`item ${isHovered ? 'item--hover' : ''}`}→ ❌ 失效 - 正确写法是：
className={\`${styles.item} \${isHovered ? styles.itemHover : ''}\`}→ ✅ - 更稳妥的是用
clsx：className={clsx(styles.item, isHovered && styles.itemHover)}
想复用伪类逻辑？别硬套，改用 CSS 自定义属性或 JS 控制
CSS Modules 本身不支持像 Sass 那样 @mixin hover-effect 的抽象。如果你发现多个组件都要写一模一样的 :hover 规则，说明这不是样式隔离问题，而是设计系统层面的重复。
这时有两个务实选择：
- 提取为 CSS 自定义属性，在模块内复用：
.btn { --hover-bg: #0056b3; } .btn:hover { background-color: var(--hover-bg); } - 把交互逻辑交给 JS，用
onMouseEnter/onMouseLeave切换状态类（仍需走classes）
强行用 :global() 或外部全局 CSS 来“复用”伪类，反而破坏了模块边界，得不偿失。
Vite/webpack 开发时看不到原始类名？不是 bug，是机制
DevTools 里看到 button__2x9aZ 而不是 button，这是 CSS Modules 的正常行为。它靠哈希确保隔离，不是编译出错。
但调试时确实不方便。Vite 用户可在 vite.config.ts 中微调：
css: {
modules: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
这样开发时类名变成 Button__button___2x9aZ，既保留可读性，又不破坏作用域。注意：这个配置只影响开发环境，生产构建仍用短哈希。
真正容易被忽略的是：一旦用了 :global() 或 :export，就等于主动退出模块化保护，后续所有相关样式都要手动对齐作用域范围——这点在多人协作时极易埋雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
