css 本身无作用域，通用类名如 .btn 易冲突；css modules 通过构建工具生成唯一哈希类名实现自动命名空间；纯 html 场景需手动前缀或 postcss；shadow dom 提供真正样式隔离但有 seo 和主题复用限制。
为什么直接用 class 名会冲突
当多个团队或模块共用一个 HTML 页面时，.btn、.header 这类通用名极易被覆盖。浏览器按 CSS 加载顺序和选择器权重决定最终样式，没人能保证你写的 .btn 一定生效——尤其在微前端、iframe 嵌入或第三方 SDK 场景下。
这不是“写得规范就能避免”的问题，而是 CSS 本身没有作用域。即使你用 BEM，只要没隔离，别人照样能用 .btn--primary 覆盖你。
用 CSS Modules 实现自动命名空间
CSS Modules 不是标准，而是构建工具（如 Webpack、Vite）的 loader 行为：它把每个 .module.css 文件里的类名编译成唯一哈希，比如 .button → _button_1x2y3，再通过 JS 动态注入 class 名。
- 必须以
.module.css（或.module.scss）为后缀，否则 loader 不触发 - import 进来的不是字符串，而是对象：
import styles from './Button.module.css'→styles.button是真实类名 - 不支持全局选择器（如
html、body），要用:global(.reset)显式声明 - Vite 默认启用，Webpack 需配
css-loader?modules
不用构建工具时怎么加命名空间
纯 HTML + CDN 场景下，CSS Modules 行不通。这时只能手动或半自动加前缀：
- 用 PostCSS 插件
postcss-prefixwrap，对整个文件加包裹选择器：#my-app .btn - 用
postcss-modules提前生成映射 JSON，再在 JS 里读取类名（适合 SSR） - 最简方案：约定前缀，比如所有组件 CSS 都以
u-（utility）、c-（component）、l-（layout）开头，配合 ESLint 规则校验 - 注意：伪类（
:hover）、媒体查询（@media）内部不能嵌套新类名，前缀必须写全：.c-button:hover，不能只写:hover
Shadow DOM 是真正的样式隔离
如果目标是彻底免冲突，且运行环境支持（现代浏览器、Web Components），直接上 Shadow DOM —— 它天然隔离样式，外部 CSS 无法穿透，内部也不影响外部。
- 创建时传
{mode: 'closed'}更安全，连 JS 都无法访问内部样式表 - 内部仍可写普通 CSS，无需改写类名；
<style></style>标签或adoptedStyleSheets都行 - 缺点：SEO 友好性弱（内容在 shadow root 内），调试需切到 Elements 面板的
#shadow-root下 - 不适用于想复用全局主题色或字体的场景——得靠 CSS 自定义属性（
--theme-color）透传
真正难的不是加前缀，而是判断该在哪一层做隔离：是单组件内用 CSS Modules，还是整块业务用 Shadow DOM，又或者只是用自定义属性 + 命名约定撑住当前迭代周期。选错一层，后面补成本远高于早期拍板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
