CSS Modules 的哈希类名不可预测，直接写死如 .Button__abc123 会导致测试失败、调试失效和环境不一致；应优先用 JS 引用 styles.button 或 data-testid，辅以 :global()（慎用防污染）和属性选择器。
CSS Modules 生成的类名不可预测，直接写死选择器会失效；必须用 :global() 或 JS 引用方式来定位。
为什么不能直接写 .Button__abc123 这样的选择器
构建工具（如 Webpack/Vite）默认把 .button 编译成类似 .button__xyz789 的哈希类名，每次构建都可能不同。硬编码这种类名会导致：
- 测试时定位失败（E2E / snapshot 测试抓不到元素）
- DevTools 里手动调试后复制的类名，下次刷新就失效
- CI 环境和本地开发环境哈希不一致，样式断言失败
:global() 是唯一能写静态选择器的合法方式
只有被 :global() 包裹的选择器才会原样输出、不加哈希，适合用于需要稳定选择器的场景（比如 E2E 测试、第三方库注入、全局 reset）：
:global(.test-button) {
background: #007bff;
}
<p>/<em> ✅ 可靠：DOM 中 class 就是 test-button </em>/
/<em> ❌ 错误：.button 会被哈希，.test-button 不生效 </em>/
.button {
padding: 8px 16px;
}
</p>
-
:global()只作用于紧邻其后的选择器，:global(.btn) .icon中的.icon仍被局部化 - 多个选择器要分别包裹：
:global(.btn-primary), :global(.btn-secondary) - 不能嵌套在
@media或@keyframes内部使用
用 JS 引用类名才是主流可靠方案
真正安全的做法是让 JS 控制类名绑定，而不是靠 CSS 选择器“猜”：
import styles from './Button.module.css';
<p>function Button() {
return <button classname="{styles.button}">Click</button>;
}
</p>
-
styles.button总是返回当前模块编译后的真实类名字符串 - 配合
data-testid属性做 E2E 测试更稳妥：data-testid="primary-button" - 若需组合多个类，用
clsx或模板字面量：className={`${styles.button} ${styles.primary}`}
属性选择器可以作为补充手段，但有局限
CSS Modules 不影响属性选择器（如 [data-role="button"]），这类选择器天然稳定：
[data-role='submit'] {
font-weight: bold;
}
- 适用于标记语义化行为而非视觉样式（比如表单提交按钮）
- 不能替代类名控制样式细节（如
padding、color），因为属性选择器优先级低、可维护性差 - 注意：属性值需严格匹配，
[data-status]和[data-status="loading"]是两回事
最易被忽略的是：很多人以为加了 :global() 就万事大吉，却没意识到它会让该类名重新进入全局污染风险——一旦第三方样式或同名类出现，就会互相覆盖。真正可靠的路径只有一条：JS 绑定 + 语义化属性标识，而不是依赖 CSS 选择器去“找”那个随时会变的哈希名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
