<p>应使用 data-* 属性等稳定选择器替代哈希类名，如 data-testid；也可借助 DOM 结构、标签、属性或位置关系定位；开发时可配置可读类名辅助调试，但不可用于生产；最终应封装选择器逻辑以解耦样式与查找。</p>
直接用哈希后的类名写 querySelector 确实不可行——它每次构建都可能变，且开发/生产环境不一致。关键不是“找对类名”，而是绕过类名，改用更稳定、可预测的选择器策略。
用 data-* 属性精准定位，不依赖类名
在 JSX 中给目标元素加上语义化 data-testid 或 data-role，比如：
function Button() {
return <button data-testid="primary-button">Submit</button>;
}
```
JS 中即可稳定选取：document.querySelector('[data-testid="primary-button"]')
这类属性不会被 CSS Modules 处理，也不参与样式编译，完全可控。
借助组件层级与 DOM 结构定位
避免硬编码类名，转而利用父容器、标签类型、文本内容或位置关系：
立即学习“前端免费学习笔记（深入）”；
container.querySelector('button[type="submit"]')form.querySelector('input[name="email"]')dialog.querySelector('.modal-content') // 若 .modal-content 是 :global 或已知全局类-
el.parentElement?.querySelectorAll('li')[2]（适用于固定结构的列表项）
开发期临时启用可读类名，仅限调试
在 Webpack 或 Vite 配置中为开发环境定制 localIdentName，例如：
// webpack.config.js（开发模式）
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path][name]__[local]___[hash:base64:3]',
hashPrefix: 'dev'
}
}
}```
这样生成的类名如 src_components_Button__button___aBc 带路径和原始名，一眼可识别文件与样式意图，方便临时调试，但切勿用于生产或自动化脚本。
封装选择器逻辑，与样式解耦
把查找逻辑抽成函数，内部用上述任一稳定方式，对外只暴露语义接口：
```tsexport function getPrimaryButton(container: HTMLElement) {
return container.querySelector('[data-testid="primary-button"]') ||
container.querySelector('button[data-role="primary"]');
}
// 使用时：
const btn = getPrimaryButton(document.body);
```
这样即使未来 DOM 结构微调，也只需改一个地方，不影响业务代码。
