less嵌套不防冲突，需靠bem命名（如&__input）、顶层类名html配合、避免泛化名、控制嵌套深度、优先级兜底；第三方冲突需子选择器或重复类名，禁用!important。
Less 本身不防止选择器冲突，它只负责把嵌套语法转成普通 CSS；真正起作用的是你手动加的前缀、命名约定和 HTML 配合方式。
为什么嵌套 .card { .title { } } 依然会冲突
编译后是 .card .title，不是 .card__title —— 它只是后代选择器，只要页面里有别的 .title，照样被影响。Less 嵌套不是作用域开关，只是写法糖。常见错误包括：
- 以为写了
.user-card { .title { } }就安全了，结果别人在全局写了.title { color: red; }，你的样式照样被覆盖 - 在命名空间块里用
html或body选择器，前缀失效，直接污染全局 - 动态插入的弹窗、提示框没加顶层类名，比如
<div class="toast"> 没加 <code>my-ui-kit，样式完全不生效用 & 拼出 BEM 类名才是物理隔离
靠
&显式拼接，生成带连字符或双下划线的独立类名，才能避开“同名即冲突”的问题。例如：.search-form { &__input { width: 200px; } &__submit { background: #007bff; } &--compact { font-size: 14px; } }编译后是
.search-form__input、.search-form__submit、.search-form--compact，这些类名几乎不会撞车。注意：-
&后不能有空格：& __input是错的，必须写成&__input - 避免用泛化名：
.list、.item这种词基本必撞，换成.product-list、.cart-item - 层级别太深：控制在 2 层以内，比如
.modal__content__header就过度了，改用.modal-content-header
HTML 容器必须显式加顶层类名
再规范的 Less 写法，如果 HTML 不配合，就等于白干。所有使用该样式库的容器都得手动加顶层类：
<div class="my-ui-kit"> <button class="button">确定</button> </div>
否则
.my-ui-kit .button根本不匹配。特别要注意：- 第三方 SDK 注入的浮层（如埋点弹窗）、
document.body挂载的 toast，必须在 JS 创建时也加上my-ui-kit类 - 不要依赖
@import (reference)来“隐藏”命名空间——它只跳过 CSS 输出，不改变选择器结构 - 变量和 mixin 放哪都不影响选择器，别把
@primary-color塞进.my-ui-kit { }块里，纯属多余
第三方样式冲突时怎么兜底
前缀方案防不住没前缀的第三方规则（比如 Bootstrap 的
.btn），这时候只能靠优先级微调：- 用子选择器提升权重：
.my-ui-kit > .button比.my-ui-kit .button权重高一级 - 重复类名强化：
.my-ui-kit .button.button（前提是 HTML 确实加了两个class） - 基础重置类（如
box-sizing）直接写在:root或html上，不依赖前缀 - 绝对避免
!important—— 它会让后续任何覆盖都变成硬编码，破坏可维护性
真正难缠的是那些内联 style、无源码、无前缀的第三方浮层，命名空间只是第一道防线，后面还得靠属性选择器或 JS 动态 patch。
-
