Less 3 无真正命名空间，仅靠顶层类名+嵌套+&拼接实现样式隔离，需手动确保类名唯一、HTML挂载、变量/mixin加前缀。
Less 3 中没有真正的命名空间隔离机制，所谓“命名空间”只是嵌套选择器生成前缀的语法糖，不控制变量作用域、不阻止样式泄漏、也不自动加类名到 HTML —— 能否避免污染，全看你是否手动做对三件事：顶层类名唯一、HTML 容器显式挂载、变量/mixin 全带前缀。
为什么 #ui-button 不是命名空间，而只是空壳 mixin 容器
很多人写 #ui-button { .primary { color: blue; } }，以为编译后会自动变成 .ui-button__primary 或至少 #ui-button .primary。但实际输出就是裸的 .primary —— 因为 #xxx 在 Less 3 中仅作为 mixin 容器存在，不参与选择器生成逻辑。
-
#ui-button块内定义的.primary()必须被显式调用（如#ui-button > .primary();）才会输出，否则完全不编译 - 块内直接写的规则（如
.primary { ... }）会被平铺输出，#ui-button根本不作为前缀出现 - 变量（如
@color）放进去也无效：变量默认全局，嵌套不影响作用域 - 更危险的是：
#utils { .hide() { display: none; } }编译后会生成空选择器#utils{}，污染 CSS 文件体积且毫无意义
真正起作用的命名空间写法：用 .my-kit + 嵌套 + & 拼接
要让所有样式带统一前缀，必须用语义化顶层类名包裹，并依赖嵌套规则自动拼接子选择器。这是 Less 3 唯一可靠的方式：
.user-card {
&__avatar { width: 40px; }
&__name { font-weight: bold; }
&--editable { cursor: pointer; }
}
-
&必须紧贴修饰符（&__avatar✅，& __avatar❌），否则编译失败 -
~".user-card"这种字符串插值在选择器中受限，&是唯一安全拼接方式 - 编译结果是
.user-card__avatar、.user-card__name，天然 BEM 风格，无全局泄漏风险 - 该写法要求 HTML 中对应容器必须有
class="user-card"，否则规则永不生效
变量和 mixin 必须手动加前缀，否则等于没隔离
Less 3 的变量没有作用域，@primary-color 在任何文件里重定义都会覆盖之前所有引用。命名空间块（如 .user-card { @color: red; }）对变量完全无效。
- 变量命名强制加模块前缀：
@user-card-avatar-size、@button-primary-bg - mixin 必须参数化，禁用裸声明：
.btn-style(@type: default, @size: md)，配合when守卫分支 - 公共 mixin 不要塞进命名空间块里——它不改变输出结构，只增加阅读干扰
- 跨文件共享变量必须单点定义（如
variables.less），且只读不写；@import (reference)只跳过 CSS 输出，不解决变量污染
第三方样式冲突时，命名空间只是第一道防线
你写了 .my-ui-kit .button，但 Ant Design 的 .ant-btn 依然会全局生效。Less 编译不出魔法，它不修改第三方 CSS，也不注入 class 到别人 DOM 上。
- 兜底靠 CSS 权重：用
.my-ui-kit > .ant-btn或.my-ui-kit [class^="ant-"]提升精度 - 动态挂载组件（如 Tooltip 插入
body）必须 JS 补充 class：tooltipEl.classList.add('my-ui-kit') - 禁止用
#app .button或[data-ui]做前缀：ID 不可复用，属性选择器难维护易误伤 - 慎用
extend：它静态匹配选择器文本，跨文件或重命名后静默失效，优先用 mixin 传参
最常被忽略的一点：嵌套再深，只要顶层类名没挂到 HTML 容器上，整块样式就等于不存在。Less 不会替你操作 DOM，它只忠实地把 .my-kit .btn 编译成 CSS 字符串——挂不挂、怎么挂，是你自己的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
