CSS Module如何避免样式冲突

CSS Module 并非 HTML 原生能力，其核心价值——类名自动哈希、作用域隔离与构建时注入——完全依赖 Vite/Webpack 等构建工具和 JS 模块系统（如 import styles from './X.module.css'），纯 HTML 文件中直接写 class 或引入普通 CSS 根本无法触发模块化；常见失效原因包括文件名未用 .module.css 后缀、错误使用 require 或 @import、未通过 {styles.xxx} 动态绑定类名等；若受限于无构建环境，只能退守 BEM 命名、ID 封装或前缀约定等人工策略，但这些远不如 CSS Module 自动、可靠、可维护——理解“模块化发生在构建与运行时，而非 HTML 静态层面”，才是避开踩坑的第一步。

HTML里不能直接用 CSS Module

CSS Module 不是 HTML 原生能力， 引入的普通 CSS 文件完全不支持模块化。你在 HTML 中写 class="button"，浏览器就真按字面匹配全局 .button，不会加哈希、不隔离、不校验——所有 CSS Module 的机制在纯 HTML 环境下根本不存在。

常见错误现象：import styles from './Button.module.css' 这行代码在 HTML 里直接报错，因为没 JS 模块系统；或者你硬塞进