css modules是唯一能真正隔离class作用域的方案，它通过构建工具编译时将.card重命名为_card_abc123等唯一标识，确保局部生效；需开启modules:true、合理配置localidentname和loader顺序，且必须通过js导入使用，纯html硬编码无效。
HTML里直接写class="card"根本不算模块化
纯 HTML 引入外部 .css 文件，所有 class 都是全局作用域。你写一个 .card，它就可能覆盖掉另一处的同名样式，尤其在多人协作或复用旧组件时，冲突几乎必然发生。这不是“写得不够规范”的问题，而是机制层面缺失隔离——BEM 命名再严格，也无法阻止别人不小心删掉前缀，或复制代码时漏掉某条 CSS 规则。
CSS Modules 是唯一能真正隔离 class 作用域的方案
它不是靠人约定，而是构建工具在编译时把 .card 自动重命名为类似 _card_abc123 这样的唯一标识，且只在对应模块内生效。关键点在于：
-
modules: true必须开启，但仅此不够；localIdentName建议设为"[name]_[local]_[hash:6]"，否则调试时找不到源文件对应关系 - 匹配规则要排除
node_modules和公共样式（如reset.css），否则import 'bootstrap/dist/css/bootstrap.min.css'会被重命名，整个 UI 崩溃 -
css-loader必须放在sass-loader或less-loader之后，顺序反了，Sass 里的.card就不会被处理 - HTML 中不能硬编码
class="card"—— 编译后这个名字已不存在，必须通过 JS import 模块对象后取值：styles.card
没 JS 入口的纯静态页怎么办
如果页面完全不走 JS（比如纯文档页、营销落地页），CSS Modules 失效。此时退一步，用命名空间前缀 + PostCSS 自动加前缀更实际：
- 手动写
u-card__title、u-card__image，其中u-是统一命名空间前缀 - 配 PostCSS 插件（如
postcss-prefixwrap），自动给整块 CSS 加前缀，避免手误漏写 - 禁止在全局 CSS 文件里定义裸
.card，所有模块样式必须带前缀或包裹在:where(.u-card) { ... }里
Web Components 的 Shadow DOM 是终极隔离方案
如果你需要封装 HTML 结构 + 样式 + 行为，并确保绝对不泄漏，Shadow DOM 是目前浏览器原生支持的最强隔离机制：
- 必须调用
this.attachShadow({ mode: 'open' })，否则样式仍会受外部影响 -
<style></style>标签必须写在shadowRoot.innerHTML里，外链<link rel="stylesheet">不生效 - 不要在
constructor()里操作 DOM（元素尚未挂载），改用connectedCallback() - 属性变更监听需显式声明
static get observedAttributes()，否则<my-card title="xxx"></my-card>的title不会触发更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
