less本身不提供样式隔离能力，根本原因是css全局匹配机制——浏览器只认选择器权重和dom结构，bem类名仅为普通class，无运行时作用域；真正隔离需靠唯一顶层类名锚定组件、html根容器显式添加该类、变量/mixin严格前缀化及第三方样式精准覆盖。
Less 本身不提供样式隔离能力，所谓“组件化后样式泄漏”，根本原因不是写法错，而是你没切断 CSS 的全局匹配路径——浏览器只认选择器权重和 DOM 结构，不认“这是哪个组件的样式”。
为什么 .card__header 会被 body h2 覆盖
这不是 BEM 名字不够长，而是 CSS 规则按权重和顺序执行：body h2 权重为 0-2-0，.card__header 是 0-1-0，前者更高。BEM 类名只是普通 class，没有运行时作用域。
- 所有未加容器限定的后代选择器（如
.card__body p）都会匹配到任意p，只要它在.card__body内 - 第三方库的基类（如
input:focus、button）会无差别穿透你的 BEM 类名 -
v-html或dangerouslySetInnerHTML插入的内容不会自动带上你的 BEM 类，.article__content p直接失效
用唯一顶层类名锚定整个组件作用域
嵌套不是作用域开关，它只是生成更长的选择器。真正起效的是把所有样式都挂在一个明确、唯一的 HTML 容器上。
- 每个组件 Less 文件最外层必须包裹一个唯一类名，如
.user-profile-card { ... }，不能是泛型名（.card）或 ID（#profile） - 这个类名必须显式加到组件根元素上：
<div class="user-profile-card">...</div>，否则编译出的 CSS 永远不生效 - 弹窗、Tooltip 等挂载到
body的组件，需 JS 手动加类：document.querySelector('.ant-picker-dropdown').classList.add('user-profile-card') - 禁止用
[class^="ant-"]这类属性选择器做前缀——它会误伤其他组件
变量和 mixin 必须带模块前缀，不能裸声明
Less 变量没有作用域，@primary-color 在任何地方重定义，都会覆盖之前所有引用。命名空间块（如 .ui-kit { @primary-color: red; }）对变量完全无效。
- 变量命名强制加前缀：
@user-profile-title-color、@user-profile-border-radius，杜绝@color、@radius这类泛义名 - mixin 必须参数化：
.btn-style(@type: default, @size: md)，配合when守卫分支，而不是写一堆独立的.btn-primary、.btn-small -
@import (reference)只能避免 CSS 输出，不能隔离变量；所以 reference 文件里也别放通用变量，只放带前缀的专用变量 - 全局变量文件（如
src/styles/variables.less）应只含带前缀的定义，并在所有组件中统一@import (reference)
第三方组件样式兜底靠选择器精度，不是 Less 命名空间
Ant Design、Element Plus 这些库输出的 .ant-btn 不会自动被你的 .user-profile-card 捕获。Less 编译不出魔法，只能靠 CSS 权重硬控。
- 提升精度：用子选择器
.user-profile-card > .ant-btn，比.ant-btn权重高 - 开头匹配更安全：
.user-profile-card [class^="ant-"]，比[class*="ant-"]少误伤 - 直接覆盖规则比改变量更可控：
.user-profile-card .ant-btn { border-radius: 4px; }，别去碰@border-radius-base - 构建配置漏掉
paths，@import "node_modules/xxx/xxx.less"会静默失败，务必检查 Webpack 的less-loader配置是否正确解析路径
样式泄漏从来不是“Less 写得不够好”，而是 HTML 挂载点没管住、变量没加前缀、第三方选择器没压住——这三处漏掉任意一个，再规范的 BEM 和嵌套都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
