.modal { .close { } } 不防污染，因嵌套仅生成后代选择器 .modal .close，无法隔离作用域；真正防冲突需用 &__element 生成唯一类名如 .user-card__title，并配合 HTML 容器加前缀、变量单点定义、@import (reference) 复用逻辑。
为什么 .modal { .close { color: red; } } 仍会污染全局
Less 嵌套不创建作用域，只生成后代选择器。.modal .close 匹配的是页面中任意 .modal 下的 .close，只要其他模块也用 .close，样式就可能被覆盖或反向干扰。更危险的是：如果 HTML 里没加 class="modal"，这条规则完全不生效；如果加了多个 class="modal"（比如弹窗 + 表单），.close 就被批量改写。
用 & 拼出物理隔离类名，而非依赖嵌套层级
真正防冲突的方式是让类名本身唯一，不是靠选择器路径长。必须显式用 & 构造 BEM 风格类名，确保编译后是独立选择器，而非可被外部穿透的后代关系。
-
.user-card { &__title { font-weight: bold; } &__avatar { border-radius: 50%; } }→ 编译为.user-card__title和.user-card__avatar，互不干扰 - 禁用
.user-card { title { ... } }（匹配所有title元素）或.user-card { .title { ... } }（仍依赖外部.title存在） -
&:hover安全，但body &或& + .sibling会断掉前缀，生成body .user-card这类逃逸选择器
第三方组件或动态挂载元素怎么排除污染
Ant Design、Toast、Modal 等挂载到 document.body 的组件，HTML 容器不在你控制范围内，Less 编译出的前缀选择器天然失效。此时不能靠“命名空间”，只能靠运行时干预或选择器精度补救。
- JS 插入后手动加顶层类：
document.querySelector('.ant-modal').classList.add('myapp-ui'); - CSS 层级兜底：用子选择器提升权重，
.myapp-ui > .ant-btn比.ant-btn优先级高 - 避免
!important—— 它会让后续覆盖成本指数级上升，尤其在嵌套中权重失控 - 禁用
[class^="ant-"]这类属性选择器做前缀，维护难且易误伤其他带ant-的自定义类
变量和 mixin 不是局部作用域，别信“嵌套即隔离”
Less 变量没有块级作用域。.card { @color: red; .title { color: @color; } .body { @color: blue; color: @color; } } 中，.title 实际拿到的是 blue，因为第二个 @color 覆盖了第一个。所谓“局部”只是心理安慰。
- 所有变量必须单点定义在
variables.less，末尾加!default，业务层只读不写 - 需要差异化配置？用参数化 mixin：
.btn-style(@bg: #007bff, @size: md)，而不是裸变量 - 跨文件复用逻辑，必须用
@import (reference)引入 mixin/variables，否则重复输出 CSS - 慎用
extend—— 它按文本匹配选择器，一旦目标被包裹在别的命名空间里（如.form .btn），就完全失联且不报错
真正麻烦的从来不是自己写的样式，而是 SDK 浮层、埋点 UI、内联 style 标签里那些你改不了的 CSS。Less 命名空间对此完全无感——它只管编译，不管运行时 DOM 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
