CSS命名空间需确保顶层类真实存在于DOM根容器，否则嵌套规则无效；PostCSS前缀配置须注意短横线、顺序及路径匹配；data属性方案更稳定，但第三方动态样式仍需:deep()或Shadow DOM兜底。
直接加 .my-app 前缀没用，除非它出现在每个选择器最左边，且 HTML 容器真有这个类——否则编译后还是全局生效。
为什么 .ui-kit { .button { ... } } 编译后仍冲突
Less/Sass 的嵌套只是语法糖，不生成运行时作用域。编译结果是 .ui-kit .button，但若 HTML 里没写 <div class="ui-kit"><button class="button">，这条规则根本不会匹配；更糟的是，如果第三方库也用了 .button 且权重更高（比如 .el-button.el-button--primary），你的规则会被划掉。
- 必须确保顶层命名空间类真实存在于 DOM 根容器上，不能只靠 CSS 写了就以为隔离了
- 动态挂载的弹窗、Tooltip 等脱离容器的节点，需手动补上命名空间类，否则样式丢失
- 不要在命名空间块里写
html或body选择器，它们会逃逸出前缀约束，造成全局污染
PostCSS postcss-prefixer 配置容易踩的坑
它适合老项目快速加前缀，但配置稍错就会让整个页面失常。
-
prefix必须带结尾短横线，比如'app-'，写成'app'会导致appheader这种非法类名 -
include要精确到文件路径或 glob 模式，漏配会把normalize.css也套上前缀，box-sizing 失效 - 必须放在
autoprefixer之前，否则-webkit-transform可能被误当成类名重复加前缀 - 它对
@import、:global()、CSS-in-JS 插入的 class 完全无效，别指望它覆盖动态样式
data- 属性命名空间：无构建支持时最稳的兜底方案
不依赖任何工具链，纯靠 CSS 选择器和 HTML 配合，适合微前端子应用或无法改构建的老系统。
立即学习“前端免费学习笔记（深入）”；
- 给根容器加唯一属性：
<div data-scope="dashboard">...</div> - 所有样式前置该属性：
[data-scope="dashboard"] .btn、[data-scope="dashboard"] .btn--primary - 比堆叠
div div .btn更可控，权重稳定（0,1,0,1），且不会被 JS 动态类绕过 - 注意避开第三方库用的属性选择器，比如 Ant Design 有
[class*="ant-"]，你用[data-scope]就不会干扰它
真正麻烦的不是怎么加前缀，而是哪些地方根本加不了——比如埋点 SDK 注入的浮层、服务端渲染的静态 HTML、或第三方组件内部用 JS 直接写 el.style.color。这时候命名空间只是第一道防线，后面还得靠 :deep()、!important（慎用）、或干脆换用 Shadow DOM。
