Less 的 #namespace 仅是 mixin 容器，不防污染；真正隔离依赖顶层类名显式挂载、合理嵌套与 JS 动态补类，变量需模块前缀，浮层须运行时加类，第三方样式靠权重与精准选择器兜底。

Less 的 #namespace 语法本身不防污染，它只是 mixin 容器，不会自动加前缀、不生成作用域、也不改写第三方 CSS —— 真正起效的只有你手动写的顶层类名 + 显式 HTML 挂载 + 合理嵌套结构。

顶层类名必须显式挂载到 HTML 容器

你写 .myapp { .btn { color: red; } }，编译后是 .myapp .btn；但如果 HTML 根节点没加 class="myapp"，这条规则就完全不生效。这不是 Less 的 bug，是它的设计逻辑：它只输出 CSS，不管 DOM。

• 普通组件容器（如侧边栏、表单）用语义化唯一类名：
  ，别用泛型名 card 或标签选择器
• 弹窗、下拉框、Tooltip 等挂载到 document.body 的浮层，必须靠 JS 补类：document.querySelector('.ant-picker-dropdown').classList.add('myapp')
• 禁用 ID 做前缀（如 #app .btn），ID 不可复用；也别用属性选择器（如 [class^="ant-"]），维护成本高且易误伤

变量和 mixin 必须带前缀或参数化

Less 变量默认全局，@primary-color 在任意文件重定义都会静默覆盖之前所有引用。#namespace 对变量完全无效，嵌套块里声明的变量照样泄露到全局作用域。

• 变量命名强制加模块前缀：@btn-primary-bg、@header-title-color，杜绝裸名 @color
• 公共样式用参数化 mixin 封装：.btn-style(@type: default, @size: md)，配合 when 守卫分支，而不是一堆同名 mixin
• @import (reference) 能避免重复输出 CSS，但变量仍注入全局——所以 reference 文件里也别放通用变量，只放带前缀的专用变量

嵌套层级 ≤3 层，& 关系必须显式写出

嵌套只是语法糖，不是作用域开关。过深嵌套（如 .a { .b { .c { .d { } } } }）会生成冗长选择器，权重飙升、体积膨胀、调试困难，且 Chrome DevTools 显示的源码位置和实际 Less 文件严重脱节。


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载
• 超过 3 层就该拆分组件或改用 BEM 平级命名：.modal__overlay、.modal__content，而非靠 #modal > #overlay > #content 套娃
• &:hover 是安全的，但漏写 & 写成 hover { } 会编译出非法 CSS：.btn hover
• 慎用 extend：它静态匹配选择器文本，跨文件或类名变更后直接失效且不报错；优先用 mixin 传参控制

第三方样式冲突只能靠 CSS 权重兜底

Ant Design 输出的 .ant-btn 不受你的 .myapp 命名空间控制，Less 编译器不会、也不能重写第三方 CSS。你写的 .myapp { .ant-btn { } } 编译后是 .myapp .ant-btn，而 Ant Design 的按钮根本不在 .myapp 下。

• 用子选择器提升精度：.myapp > .ant-btn 比 .ant-btn 权重高，且只作用于直接子元素，避免误伤弹窗内按钮
• 开头匹配更安全：.myapp [class^="ant-"] 匹配所有以 ant- 开头的类（如 ant-input），比 [class*="ant-"] 更精准，避免匹配到 my-ant-custom
• 运行时补类比构建时前缀更可靠：用 MutationObserver 监听浮层插入，定位 .ant-picker-dropdown 后立即加 myapp 类；别用 setTimeout 轮询

最常被忽略的一点：第三方库类名可能在小版本升级中变更，比如把 .ant-modal-body 改成 .ant-modal-content，你写的 .myapp > .ant-modal-body 就立刻失效 —— 所以关键不是写得有多“优雅”，而是补丁是否可维护、是否能快速响应变更。