less嵌套仅为语法糖，不解决命名冲突；真正防冲突需手动控制顶层类名、合理层级及bem前缀（如&__、&--），并确保html中1:1存在对应类名。
Less嵌套本身不解决命名冲突，它只生成后代选择器
很多人以为写 .card { .title { color: red; } } 就能隔离样式，结果编译出来是 .card .title —— 这仍是全局后代选择器，只要页面里有别的 .title，照样被影响。Less嵌套不是作用域开关，只是语法糖，不加前缀、不改名、不封装，冲突照旧。
真正起作用的是你手动控制的三件事：顶层容器类名是否真实存在于 HTML 中、嵌套层级是否合理、类名是否带模块前缀。
- 如果
.card这个顶层类没加到对应 HTML 元素上，整个嵌套块就失去上下文，.title变成全局污染源 - 嵌套两层以上（如
.card { .header { .title { } } }）会生成.card .header .title，权重高、复用难、易误命中 - 所有子级类名必须显式带前缀（如
&__header），不能依赖空格缩进“看起来像模块”
用 &__ 拼接 BEM 类名才是物理隔离的关键
想让 .card 下的标题真和别处互不干扰，就得让它变成独立类名，比如 .card__title。这靠 & 显式拼接，而不是空格嵌套。
正确写法：
.card {
&__title { color: #333; }
&__body { padding: 1rem; }
&--compact { font-size: 0.9em; }
}
编译后是 .card__title、.card__body、.card--compact —— 这些是独立、扁平、无歧义的类名，不依赖父级存在，也不怕别人也写 .title。
-
&__用于元素（element），&--用于修饰符（modifier），这是 BEM 约定，不是 Less 特性 - 禁止写
.card { .title { } }后又在别处写.user-card { .title { } }—— 两个.title在 CSS 里完全同名，毫无隔离 - 如果组件要支持多主题，
&--dark比.card.dark .title更可控，后者依赖 DOM 结构且权重飙升
HTML 容器类名缺失 = 前缀失效
再规范的 Less 写法，如果对应 HTML 没加顶层类，就等于白写。例如：
Less 写了 .product-card { &__price { } }，但 HTML 是 <div class="product"><span class="price">¥99</span></div> —— 那么 .product-card__price 根本不匹配任何元素，样式不会生效；而手写的 .price 又可能被其他规则覆盖。
- 必须确保每个嵌套块的顶层类名，1:1 出现在对应组件根元素的
class属性中 - 多人协作时，建议在组件文档或 Storybook 中显式标注 required class，比如
<productcard class="product-card"></productcard> - 用 Lint 工具（如 stylelint-selector-bem-pattern）校验 HTML 中是否漏写了 BEM 块名，比等 QA 提 bug 更早发现问题
第三方样式冲突只能靠子选择器或重复类名兜底
遇到第三方库（如 Ant Design、Element Plus）输出的 .el-button 和你自己的 .button 冲突，Less 无法自动避让。这时候得靠 CSS 优先级机制硬控。
推荐做法：
// 在你自己的组件 Less 文件里
.my-app {
// 强制限定作用域：只影响 my-app 下的 el-button
.el-button { background: var(--my-primary); }
// 或更稳妥：重复类名提升权重（不推荐滥用，但有时必要）
& .el-button,
.el-button.my-app-button { background: var(--my-primary); }
}
- 不要用
!important—— 它破坏可维护性，且第三方库未来升级可能加更多!important形成军备竞赛 - 避免用
html .my-app .el-button这种超长前缀，权重过高，后续几乎无法覆盖 - 如果第三方组件允许传入
className，优先塞一个唯一前缀类，比如className="my-app-el-button"，再写.my-app-el-button样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
