Less 的 #namespace 仅是 mixin 容器，不防污染；真正隔离依赖顶层类名显式挂载、合理嵌套与 JS 动态补类，变量需模块前缀，浮层须运行时加类，第三方样式靠权重与精准选择器兜底。
Less 的 #namespace 语法本身不防污染，它只是 mixin 容器，不会自动加前缀、不生成作用域、也不改写第三方 CSS —— 真正起效的只有你手动写的顶层类名 + 显式 HTML 挂载 + 合理嵌套结构。
顶层类名必须显式挂载到 HTML 容器
你写 .myapp { .btn { color: red; } }，编译后是 .myapp .btn；但如果 HTML 根节点没加 class="myapp"，这条规则就完全不生效。这不是 Less 的 bug，是它的设计逻辑：它只输出 CSS，不管 DOM。
- 普通组件容器（如侧边栏、表单）用语义化唯一类名：
<div class="user-profile-card">，别用泛型名 <code>card或标签选择器 - 弹窗、下拉框、Tooltip 等挂载到
document.body的浮层，必须靠 JS 补类：document.querySelector('.ant-picker-dropdown').classList.add('myapp') - 禁用 ID 做前缀（如
#app .btn），ID 不可复用；也别用属性选择器（如[class^="ant-"]），维护成本高且易误伤 - 变量命名强制加模块前缀：
@btn-primary-bg、@header-title-color，杜绝裸名@color - 公共样式用参数化 mixin 封装：
.btn-style(@type: default, @size: md)，配合when守卫分支，而不是一堆同名 mixin -
@import (reference)能避免重复输出 CSS，但变量仍注入全局——所以 reference 文件里也别放通用变量，只放带前缀的专用变量 - 超过 3 层就该拆分组件或改用 BEM 平级命名：
.modal__overlay、.modal__content，而非靠#modal > #overlay > #content套娃 -
&:hover是安全的，但漏写&写成hover { }会编译出非法 CSS：.btn hover - 慎用
extend：它静态匹配选择器文本，跨文件或类名变更后直接失效且不报错；优先用 mixin 传参控制 - 用子选择器提升精度：
.myapp > .ant-btn比.ant-btn权重高，且只作用于直接子元素，避免误伤弹窗内按钮 - 开头匹配更安全：
.myapp [class^="ant-"]匹配所有以ant-开头的类（如ant-input），比[class*="ant-"]更精准，避免匹配到my-ant-custom - 运行时补类比构建时前缀更可靠：用
MutationObserver监听浮层插入，定位.ant-picker-dropdown后立即加myapp类；别用setTimeout轮询
变量和 mixin 必须带前缀或参数化
Less 变量默认全局，@primary-color 在任意文件重定义都会静默覆盖之前所有引用。#namespace 对变量完全无效，嵌套块里声明的变量照样泄露到全局作用域。
嵌套层级 ≤3 层，& 关系必须显式写出
嵌套只是语法糖，不是作用域开关。过深嵌套（如 .a { .b { .c { .d { } } } }）会生成冗长选择器，权重飙升、体积膨胀、调试困难，且 Chrome DevTools 显示的源码位置和实际 Less 文件严重脱节。
立即学习“前端免费学习笔记（深入）”；
第三方样式冲突只能靠 CSS 权重兜底
Ant Design 输出的 .ant-btn 不受你的 .myapp 命名空间控制，Less 编译器不会、也不能重写第三方 CSS。你写的 .myapp { .ant-btn { } } 编译后是 .myapp .ant-btn，而 Ant Design 的按钮根本不在 .myapp 下。
最常被忽略的一点：第三方库类名可能在小版本升级中变更，比如把 .ant-modal-body 改成 .ant-modal-content，你写的 .myapp > .ant-modal-body 就立刻失效 —— 所以关键不是写得有多“优雅”，而是补丁是否可维护、是否能快速响应变更。
