Less 不防污染，需手动加前缀、控作用域、管挂载点；顶层类名须显式挂载到 HTML 容器；变量和 mixin 必带前缀或参数化；嵌套≤3层；第三方样式靠权重或构建/运行时补救。
Less 本身不防污染，所有“隔离”都靠你手动加前缀、控作用域、管 HTML 挂载点——没这三步，嵌套再深、命名空间写得再漂亮，照样全局生效。
顶层类名必须显式挂载到 HTML 容器
Less 编译器只忠实输出你写的前缀选择器，它不会自动往 DOM 上塞 class。你写 .myapp-ui { .btn { } }，编译后就是 .myapp-ui .btn，但若 HTML 里没 <div class="myapp-ui">，这条规则就完全不触发。
- 普通组件：用语义化唯一类名包裹，比如
<div class="user-profile-card"></div>，别用div或.card这种泛型名 - 弹窗/Tooltip 等挂载到
body的组件：得用 JS 在插入 DOM 后手动加类，例如document.querySelector('.ant-picker-dropdown').classList.add('myapp-ui') - 禁用 ID 做前缀（如
#root .btn），ID 不可复用；也别用属性选择器（如[class^="ant-"]），维护成本高且易误伤
变量和 mixin 必须带前缀或参数化，不能裸声明
Less 变量没有作用域，@primary-color 在文件任意位置重定义，就会静默覆盖之前所有引用。命名空间块（如 .ui-kit { @primary-color: red; }）对变量完全无效。
- 变量命名加模块前缀：
@btn-primary-bg、@header-title-color，杜绝泛义名 - 公共逻辑用参数化 mixin，别共享变量：
.btn-style(@type: default, @size: md)，配合when守卫分支 -
@import (reference)能避免重复输出 CSS，但变量仍会注入全局作用域，所以 reference 文件里也别放通用变量，只放带前缀的专用变量
嵌套层级 ≤3 层，& 关系必须显式写出
嵌套只是语法糖，不是作用域开关。过深嵌套（如 .a { .b { .c { .d { } } } }）会生成冗长选择器，性能差、难覆盖，还容易因 & 遗漏导致语义错乱。
立即学习“前端免费学习笔记（深入）”；
- 超过 3 层就该考虑拆分组件或改用 BEM 命名，比如把
.card { .header { .title { } } }改成.card__title -
&:hover是安全的，但hover { }会编译成.btn hover（语法错误），必须写全& - 慎用
extend：它静态匹配选择器文本，跨文件或重命名后直接失效，且不报错；优先用 mixin 传参控制
第三方库样式兜底要靠选择器精度，不是 Less 命名空间
Ant Design、React-Datepicker 这类库输出的 .ant-btn 不会自动被你的 .myapp-ui 命名空间捕获。Less 编译不出魔法，只能靠 CSS 权重硬控。
- 用子选择器提升精度：
.myapp-ui > .ant-btn比.ant-btn权重高 - 开头匹配更安全：
.myapp-ui [class^="ant-"]，比[class*="ant-"]少误伤my-ant-custom - 避免
!important：嵌套里加!important会让权重失控，连body .ant-btn都压不住
真正麻烦的是那些 SDK 自带的浮层或埋点 UI，它们的 CSS 往往内联、无源码、无前缀——这时候 Less 已经彻底失效，得靠构建时插件（如 postcss-prefixwrap）或运行时 patch style 标签来补救。
