less命名空间无法阻止第三方样式污染，因其仅是编译期前缀构造，不提供运行时隔离；必须配合唯一顶层类名（如.myapp-ui）、html容器显式挂载该类、css选择器层级压制三者协同才有效。
Less 本身不提供运行时样式隔离能力，所谓“命名空间”只是编译期的前缀构造手段；要真正防住第三方库（如 Ant Design、React-Datepicker）的样式冲突，必须靠 .myapp-ui 这类唯一顶层类名 + HTML 容器显式挂载 + CSS 选择器层级压制三者配合，缺一不可。
为什么直接写 #ui-kit() 或 .ui-kit { ... } 无法阻止第三方样式污染
Less 的 #namespace() 只是 mixin 容器，不生成带前缀的选择器；.ui-kit { .button { } } 编译后是 .ui-kit .button，但如果你没在 HTML 中给包裹容器加 class="ui-kit"，这条规则就完全不生效。更危险的是：第三方库自己写的 .button（无前缀）会直接命中全局，把你的 .ui-kit .button 覆盖掉——因为它的选择器权重更低。
- 所有第三方类名（如
.ant-btn、.date-picker__input）默认都是全局作用域，不会自动被 Less 命名空间捕获 -
@import (reference)能防止重复输出 CSS，但不能阻止变量或类名覆盖 - 嵌套语法（
.myapp { .btn { } }）不是作用域开关，它只控制输出结构，不改变作用域本质
必须手动加顶层容器类，并确保它出现在每个第三方组件外层
这是最简单也最容易被跳过的一步。你不能只在 Less 文件里写 .myapp-date-picker { .date-picker__input { } } 就完事——HTML 层必须真实存在这个容器：
<div class="myapp-date-picker"> <datepicker></datepicker> </div>
- 第三方组件若挂载到
body（如弹窗、Tooltip），必须用 JS 手动给那个 DOM 节点也加上myapp-date-picker类，否则样式不匹配 - 不要用 ID 或属性选择器做前缀（如
#root .date-picker__input），ID 不可复用，属性选择器后期难维护 - Vue/React 中，别依赖
scoped或css-modules自动加后缀——它们和 Less 命名空间不兼容，需显式写:global(.ant-btn)或关闭模块化
第三方不支持 classNamePrefix 时，用属性选择器软拦截
像老版本 Ant Design 或某些未暴露配置的 UI 库，没法改类名前缀，就得从 CSS 层面“围追堵截”：
.myapp-ui [class*="ant-"] {
/* 所有含 ant- 的类都进这个作用域 */
}
.myapp-ui [class^="ant-"] .ant-btn {
font-size: 14px;
}
-
[class^="ant-"]（开头匹配）比[class*="ant-"]（包含匹配）更安全，避免误伤my-ant-custom这类名字 - Webpack 中开启
css-modules时，该方案会失效，需在对应 Less 文件顶部加/* webpackMode: "global" */注释 - Vue 的
<style scoped></style>同样会让属性选择器失效，必须改成<style module></style>或显式写:global(.ant-btn)
Mixin 命名空间别当作用域用，变量和参数全无隔离
写 #button() { @color: blue; .primary() { color: @color; } } 看似封装，其实 @color 和文件顶部的 @color 是同一个变量，没有任何局部作用域。所有跨文件共享的变量必须加前缀：
- 禁用泛义变量名：
@primary、@size—— 改用@btn-primary-bg、@input-padding-xs - Mixin 调用必须带
>：#button > .primary()，漏掉会导致样式意外插入当前上下文 -
&在命名空间内调用会逃逸边界，比如.card { #button > .primary; }中的&:hover会编译成.card .button:hover，而非预期的.button:hover
真正麻烦的不是编译时的类名冲突，而是第三方 SDK 动态注入的样式（比如埋点浮层、客服按钮），它们的 CSS 往往没源码、没前缀、还内联——这时候命名空间只是第一道防线，后面还得配合选择器权重提升或构建时 CSS 提取策略来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
