Less命名空间不是原生语法，而是通过嵌套选择器模拟的前缀机制；必须用唯一顶层类名（如.ui-kit）包裹全部样式并置于选择器最左端，HTML根容器需添加该类，否则无法生效。
Less 命名空间不是 CSS 选择器，不能直接生成独立作用域
Less 的 #namespace 语法（如 #ui-button）看起来像命名空间，但它只是 Less 的“混合（mixin）容器”，**不会自动为内部样式添加前缀或隔离作用域**。你写：
#ui-button {
.primary { color: blue; }
.secondary { color: gray; }
}
编译后就是原样输出：.primary 和 .secondary，完全没带 #ui-button 前缀。这常被误认为“封装成功”，结果上线后样式全局污染。
真正起作用的是调用行为——只有显式调用 #ui-button > .primary() 或用嵌套规则手动加前缀，才能控制输出结构。
用嵌套规则 + 命名空间变量模拟模块前缀
想让 .primary 最终变成 .ui-button__primary，得靠嵌套 + 变量拼接。Less 不支持动态选择器插值（@{ns}-primary 在选择器中受限），但可以这样绕过：
立即学习“前端免费学习笔记（深入）”；
- 定义命名空间变量：
@ns: ~".ui-button"; - 用嵌套规则强制作用域：
@ns { &__primary { color: #007bff; } &__secondary { color: #6c757d; } &--large { padding: 12px 24px; } } - 编译后得到干净的 BEM 风格类名：
.ui-button__primary、.ui-button--large
注意：& 必须紧贴变量（如 &__primary），空格会导致编译失败；~".ui-button" 的波浪号是必须的，否则 Less 会把它当普通字符串不解析为选择器。
避免滥用 #namespace 混合导致选择器爆炸
有人把 #ui-button 当成“样式模块”反复 call，比如：
#ui-button {
.style() { border: 1px solid red; }
}
// 多处调用
div { #ui-button > .style(); }
span { #ui-button > .style(); }
这会生成两条重复规则：div { border: 1px solid red; } 和 span { border: 1px solid red; }，体积膨胀且无法复用 CSS 类。
更合理的方式是：用命名空间变量定义类名，再通过 .mixin 输出可复用的声明块：
@ns: ~".ui-button";
.ui-button {
@{ns}__primary { color: blue; }
@{ns}__secondary { color: gray; }
}
这样既保持结构清晰，又避免冗余输出。
和 CSS Modules / scoped CSS 的关键区别
Less 命名空间不提供运行时隔离能力。它生成的是静态 CSS，没有哈希类名、无组件级作用域、不处理父子组件样式穿透。如果你在 Vue/React 项目里混用 Less 和 <style scoped></style>，Less 编译出的 .ui-button__primary 仍可能被外部样式覆盖，除非额外加 !important 或提高选择器权重——而这恰恰违背了模块化初衷。
真要强隔离，Less 只能配合构建工具（如 postcss-modules）做类名转换，或者直接切到 CSS-in-JS 方案。单纯依赖 #namespace 写法，容易在协作中让人误判封装强度。
