Less无运行时作用域，所有CSS全局生效；命名空间和嵌套仅为语法糖，非隔离机制；防污染须人工约束：唯一顶层类名、严格嵌套、HTML显式添加该类。
Less 本身没有运行时作用域，所有编译出的 CSS 都是全局生效的——这是污染的根本原因，命名空间和嵌套只是“手动加前缀”的语法糖，不是隔离机制。
Less 命名空间根本不是作用域隔离
写 .ui-modal { .close { color: red; } }，编译后就是 .ui-modal .close 这条普通 CSS 规则。它不带 scoped 属性，不加哈希后缀，也不检查 HTML 中是否真有 .ui-modal 容器。只要页面里任意地方存在匹配的 DOM 结构，样式就生效。
- 常见翻车：两个组件都用了
.header .title，但 HTML 混排了，.title样式互相覆盖 -
@import只是文本拼接，所有变量、mixin、类名都在同一个扁平作用域里合并 -
.namespace不是关键字，#modal或.ui-kit这类写法只是开发者约定，Less 编译器不识别“命名空间语义”
嵌套规则只生成前缀，不阻止选择器泄漏
嵌套看起来“包住”了样式，但本质是自动拼接父选择器。只要顶层没用唯一类名锚定，照样污染：
- 错误写法：
.card { h2 { color: blue; } }→ 编译为.card h2，但若页面其他区域也有.card，就会误中 - 更危险的是：
.card { button { padding: 8px; } }→ 编译为.card button，可能命中所有子树里的button，包括第三方弹窗里的按钮 -
& + .sibling或body &这类写法会直接跳出原意的“模块边界”，生成完全失控的选择器
真正能防污染的只有三件事
别指望 Less 自动帮你隔离，必须靠人工约束+工具链配合：
- 每个组件 Less 文件必须以**唯一业务语义类名**开头，如
.search-input-v2或.user-profile-card，禁止用泛型标签或无意义前缀（如.component-123） - 所有内部样式必须严格嵌套在该顶层类下，禁用裸写
button、h2、.icon等全局选择器 - 变量复用靠
@import (reference)引入基础配置，再通过参数化mixin注入，例如.btn-style(@bg: @primary-color)；绝不在组件文件里重新赋值@primary-color - 构建阶段可加
postcss-prefixwrap插件，把整个文件输出包裹进一个稳定哈希类（SSR 下需保证 hash 一致），但这已是外部补救，非 Less 原生能力
最容易被忽略的一点：HTML 容器必须显式加上那个唯一顶层类名，比如
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
