less嵌套不解决全局污染，因编译后仍为普通css选择器；需手动加唯一前缀（如.user-profile-card）、避免泛化名、善用&复用父选择器生成bem类名，或接入css modules等构建级作用域方案。
Less里用嵌套写样式，为什么编译后还是全局污染？
因为Less嵌套本身不生成命名空间，它只是语法糖——.header { .title { color: red; } } 编译出来就是 .header .title，照样可能和别的 .title 冲突。嵌套 ≠ 作用域隔离，这点很多人误以为“写了嵌套就安全了”。
真正起隔离作用的，是显式加前缀或用 :local 类似机制（但Less原生不支持CSS Modules）。所以别依赖嵌套结构“自动防冲突”，得主动设计隔离策略。
给组件加唯一前缀：手动命名空间最稳
在根选择器上硬加业务/组件标识，比如 .user-profile-card 而不是 .card，所有子类都从它开始嵌套。这是目前Less项目里最可控、兼容性最好、调试最直观的方式。
- 避免用泛化名：
.list、.item、.content—— 这些几乎必然撞车 - 前缀建议带层级感：
.search-result-list比.result-list更不易重名 - 如果用构建工具（如webpack + less-loader），可配合
modifyVars注入项目级前缀变量，但别指望它自动重写所有选择器
用&符号复用父选择器，减少手误漏前缀
& 是Less里少被用到位的关键字，它代表当前嵌套的父选择器。不用它，容易写成 .modal { .close { ... } .header { ... } }，结果 .close 和 .header 在别处也被定义过；用了它，就能强制绑定上下文：
.user-dialog {
&__header { font-size: 18px; }
&__body { padding: 16px; }
&__footer { text-align: right; }
}
编译后是 .user-dialog__header 等BEM风格类名，既隔离又语义清晰。注意：& 后面不能空格，& __header 是错的，必须写成 &__header 或 &-header。
为什么不用CSS Modules或scoped？Less本身不解决这个问题
Less是预处理器，运行在构建阶段，不参与运行时样式作用域管理。像Vue的 <style scoped></style> 或React的CSS Modules，靠的是构建时重写类名+加属性选择器（如 [data-v-xxx]），和Less无关。你可以在Less文件里写 .button { ... }，但只要没被CSS Modules接管，它就还是全局生效。
所以别指望“升级Less版本”或“加个插件选项”就能自动隔离——核心矛盾不在Less，而在你是否把Less文件接入了具备作用域能力的构建流程。没接，再规范的Less写法也拦不住类名冲突。
真要彻底隔离，得选一边：要么老老实实用命名空间（推荐），要么换技术栈用CSS Modules / scoped / emotion等。Less自己，只管把@变量、嵌套、&这些写清楚，剩下的，它不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
