命名空间本质是前缀拼接而非作用域隔离，用于避免类名冲突；必须将顶层类名加到dom容器上，禁用html/body/id等逃逸选择器；配合@import(reference)和mixin才能实现可复用组件。
命名空间不是作用域隔离，而是前缀拼接
Less 没有真正的模块作用域，.ui-kit { .button { ... } } 编译后只是生成 .ui-kit .button 这类带空格的后代选择器，并非 CSS-in-JS 那种哈希类名或 Shadow DOM 隔离。它解决的是“避免和第三方 CSS 类名撞车”这个具体问题，比如防止你写的 .button 被 Bootstrap 的同名规则覆盖或反向干扰。
常见错误是以为套个 .my-lib 就万事大吉——但若 HTML 容器没加 class="my-lib"，所有样式直接失效；或者在命名空间里写 html { margin: 0; }，结果前缀被忽略，污染全局。
- 必须把顶层类名加到实际 DOM 容器上，例如
<div class="my-lib"><button class="button"></button></div> - 禁止在命名空间块内使用
html、body、id或属性选择器，它们会逃逸前缀 - 动态挂载的组件（如 toast、modal）也要手动补上顶层类名，否则样式不生效
命名空间 + mixin 组合才能封装可配置组件
光靠嵌套选择器只能加前缀，真正复用靠的是 .button(@type, @size) 这类带参数的 mixin。命名空间本身不参与编译输出，但它让 mixin 调用时能天然继承上下文前缀，比如：
.ui-kit {
.button(@type: default) when (@type = primary) {
background: @primary-color;
}
button {
.button(primary);
}
}
这样调用 .button(primary) 时，生成的 CSS 自动带上 .ui-kit button 前缀，无需重复写选择器。
- mixin 定义放在命名空间外（如
mixins/buttons.less），调用放在命名空间内，避免混杂 - 守卫条件
when (@type = primary)必须互斥，否则多个规则叠加导致样式错乱 - 不要把变量塞进命名空间块里——
@primary-color放base/variables.less即可，嵌套不改变其作用域
@import (reference) 是命名空间配套的关键开关
想让 mixin 可复用又不输出冗余 CSS，必须用 @import (reference) "mixins/buttons.less";。普通 @import 会把文件内容原样贴进来并输出样式；(reference) 只引入定义，不生成 CSS，适合放变量、mixin 等逻辑单元。
如果误用普通 @import 引入 mixin 文件，而多个组件都这么干，最终 CSS 里会出现多份重复的 .clearfix、.sr-only 声明——这不是 bug，是 Less 文本拼接的必然结果。
-
@import (reference)只用于mixins/和variables/类文件，样式文件（如components/button.less）必须用普通@import - 根文件
index.less统一管理所有@import，子模块禁止自行引入公共依赖 - 禁用
@import (multiple)，它会让同一文件插入多次，变量重复赋值时某些编译器静默覆盖，排查极难
命名空间无法防住动态注入的第三方样式
像埋点 SDK、客服浮窗这类运行时动态插入的 DOM，往往自带无前缀的 .popup、.mask 样式，命名空间完全无效。这时只能靠优先级硬控：
- 用
.my-lib > .button（子选择器）替代.my-lib .button（后代选择器），提升权重 - 关键重置规则（如
box-sizing）直接写在html或*上，不依赖前缀 - 避免
!important，它会让后续覆盖成本指数上升，且破坏 BEM 语义
真正麻烦的从来不是怎么写 Less，而是当 12 个开发者各自提交带命名空间的组件、又有人悄悄改了 variables.less 里的 @font-size-base，没人能快速定位为什么某处文字突然变小了——这得靠 CI 校验和文件层级约定兜底，不是语法能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
