less的namespace不是作用域开关，仅生成前缀选择器；真正防污染需唯一顶层类名（如.myapp-ui）+html显式挂载+css层级压制三者协同，缺一不可。
Less 的 namespace 不是作用域开关，它不阻止类名冲突，也不防全局污染——你写 .ui-kit { .button { } }，编译后只是生成 .ui-kit .button 这样的选择器，和手写没区别。真正起效的，是你是否在 HTML 里加了 class="ui-kit"，以及第三方类名有没有被这个前缀“罩住”。
为什么嵌套写法（如 .myapp { .btn { } }）不能自动隔离样式
嵌套只是语法糖，不改变 CSS 作用域本质。它只控制输出结构，不生成运行时隔离。常见错误包括：
- 写了
.modal { .close { } }，但页面多个地方用了class="modal"，结果所有.close都被改了 - 在命名空间里定义变量（如
.myapp { @color: red; }），该变量仍全局生效，和写在文件顶部一样 - 用
&:hover时，实际输出是.myapp:hover .btn，语义已变，可能意外匹配到容器本身而非按钮
必须手动挂载顶层类名到 HTML 容器
这是最容易跳过、也最致命的一环。Less 编译不出“魔法”，它只忠实输出你写的前缀选择器。没有对应 HTML class，规则就完全不生效。
- 普通组件：必须包裹在带类名的容器中，例如
<div class="myapp-ui"><datepicker></datepicker></div> - 弹窗/Tooltip 等挂载到
body的组件：得用 JS 在 DOM 插入后手动加类，比如document.querySelector('.ant-picker-dropdown').classList.add('myapp-ui') - 禁用 ID 或属性选择器做前缀（如
#root .ant-btn），ID 不可复用，[class^="ant-"]又难维护且易误伤
第三方库类名无前缀时怎么兜底
Ant Design、React-Datepicker 这类库默认输出 .ant-btn、.date-picker__input，它们不会自动被你的 Less 命名空间捕获。此时只能靠 CSS 权重和选择器精度硬控：
- 用子选择器提升优先级：
.myapp-ui > .ant-btn比.ant-btn权重高 - 重复类名（非推荐但有效）：
.myapp-ui .ant-btn.ant-btn，利用重复类提升 specificity - 开头匹配更安全：
.myapp-ui [class^="ant-"]，比[class*="ant-"]少误伤my-ant-custom - 避免
!important——它会让后续覆盖成本飙升，尤其在嵌套中权重会失控
真正麻烦的是那些 SDK 自带的浮层或埋点 UI，它们的 CSS 往往内联、无源码、无前缀。这时候靠 Less 命名空间已经失效，得靠构建时注入全局前缀（如 postcss-prefixwrap）或运行时动态 patch style 标签——而这些，Less 本身一句话都帮不上忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
