less中没有真正的私有模块，所谓“命名空间”仅靠人为约定、选择器前缀和文件组织实现样式隔离，#namespace不自动加前缀、变量默认全局、mixin需以点开头且不在顶层调用才能避免输出。
Less 里没有真正的“私有模块”或“作用域隔离”，所谓“命名空间模拟私有化”，本质是靠人为约定 + 编译时选择器前缀 + 文件组织来规避全局污染。它不阻止样式输出，只控制输出结构和调用路径。
为什么#namespace不是私有作用域
#ui-button这类写法看起来像命名空间，但它只是 Less 的混合容器（mixin 容器），**不会自动给内部规则加前缀**。你写：
#ui-button {
.primary { color: blue; }
}
编译后就是.primary，完全没带#ui-button前缀——它既不生成#ui-button .primary，也不阻止其他地方的.primary被覆盖。
真正起作用的是显式调用：#ui-button > .primary()，或者用嵌套规则手动包裹。
- 误以为
#xxx定义后就“封装好了”，结果上线发现样式撞车 - 在
#utils里定义.hide()，却忘了#utils本身会被编译成空选择器#utils{}，污染 CSS - 把变量也塞进
#namespace块里，但变量默认全局，嵌套不影响作用域
用@ns变量 + &拼接生成 BEM 类名
想让.primary变成.ui-button__primary，得放弃#语法，改用变量拼接：
@ns: ~".ui-button";
@ns {
&__primary { color: #007bff; }
&__secondary { color: #6c757d; }
&--large { padding: 12px 24px; }
}
编译后得到干净的类名：.ui-button__primary、.ui-button--large。
-
~".ui-button"里的波浪号~必须写，否则 Less 把它当字符串，不解析为选择器 -
&__primary必须紧贴变量，中间不能有空格，否则编译失败 - 这种写法本质是“前缀生成”，不是作用域控制；HTML 仍需手动加
class="ui-button__primary"
让 mixin 真正“不输出”的唯一方式：点前缀 + 不顶层调用
如果你只想把 mixin 当工具函数用（比如计算尺寸、生成颜色），不让它出现在最终 CSS 里，必须：
- 定义时以点开头：
.size(@w: auto, @h: auto) { width: @w; height: @h; } - 不在任何顶层规则中直接调用它，比如不能写
.size();在文件最外层 - 只在其他 mixin 或选择器内部调用：
.button() { .size(100px, 40px); } - 避免在
@import (reference)文件里漏掉点前缀，否则仍会泄露空规则
常见错误：写成size() { ... }（无点）→ 编译后多出一条size{}空规则；或写了.size()却在根作用域调用.size;→ 同样输出空块。
HTML 必须配合，否则前缀失效
所有基于嵌套生成的前缀（如.ui-kit .button或.ui-button__primary）都依赖 HTML 结构。如果没在根容器上加对应类名，样式根本不会生效。
-
.ui-kit { .button { ... } }→ HTML 必须有<div class="ui-kit"><button class="button">... <li>弹窗、Tooltip 等挂载到<code>的组件，也得手动给它们加上ui-kit类，否则样式丢失 - 别指望用
html或body做前缀——这等于全局污染，前缀形同虚设
最易被忽略的一点：命名空间的“私有化”效果完全依赖开发者的自觉性。它不报错、不警告，只有上线后样式错乱时才暴露问题——而那时往往已经跨了多个文件、多个团队协作节点。
