Less嵌套不生成作用域，仅为语法糖；需用唯一根类（如.my-component）限定范围，避免全局污染，慎用!important与深层嵌套，并通过BEM命名、模块前缀及JS类管理替代CSS Modules缺失功能。
Less 中的嵌套规则如何真正限制样式作用域
嵌套本身不生成作用域，只是语法糖；它生成的选择器仍会“泄露”到全局，除非配合 class 或 id 容器明确限定根节点。
- 错误写法：
.header { h1 { color: red; } }→ 编译后是.header h1，看似安全，但若页面其他地方也有.header，照样污染 - 正确做法：用唯一性容器包裹，比如
.my-component { .header { h1 { color: red; } } }，确保所有样式都锚定在.my-component下 - 嵌套过深（>4 层）会导致选择器权重飙升、调试困难，也增加 CSS 文件体积，建议用 BEM 式命名替代深层嵌套
如何用 module 模式（非官方）模拟 CSS Modules 行为
Less 本身不支持模块化作用域，但可通过约定 + 工具链实现类似效果：每个组件 Less 文件以唯一前缀开头，并只暴露顶层 class。
- 文件命名统一为
Button.less，内容以.Button { ... }开头，内部所有嵌套都基于.Button - 禁止在文件中写全局选择器如
button、h2，哪怕加了嵌套也不行（.Button { button { ... } }仍可能匹配到子树里任意button） - 构建时可用
postcss-prefixwrap或自定义插件，把整个文件编译结果包裹进一个随机 hash 类名，但需注意 SSR 和服务端渲染时 hash 必须稳定
composes 不是 Less 原生能力，别被 Webpack loader 文档误导
有人看到 less-loader 配置里写了 modifyVars 就以为能像 CSS Modules 那样用 composes，其实不行 —— Less 解析器根本不认识这个语法，直接报错 ParseError: Unexpected token 'composes'。
- 真实可行的替代方案只有两个：手动
@import公共样式片段（如@import "mixins/typography";），或用.extend()继承（但仅限于同文件或已导入的 selector） -
.btn { &:extend(.btn-reset all); color: blue; }是合法的，但.btn-reset必须已定义，且all参数会让所有声明（包括未用到的）都被复制，可能引入冗余 - 如果真需要组合类行为，建议在 JS 层用
clsx或classnames控制 class 列表，而不是强求 Less 承担职责
为什么 !important 在嵌套里特别危险
Less 的嵌套会让 !important 的实际权重远超预期，尤其当多层嵌套叠加时，容易覆盖掉本不该动的第三方组件样式。
立即学习“前端免费学习笔记（深入）”；
- 写
.Modal { .close { display: none !important; } }，实际编译为.Modal .close { display: none !important; }，权重比.close高得多，连body .close都压不住 - 第三方 UI 库（如 Ant Design）大量使用
!important，你一加嵌套再加!important，极易引发不可预测的样式打架 - 调试时 Chrome DevTools 显示 “
!important(inherited)” 很可能是嵌套导致的误判，实际来源是父级选择器权重过高，不是真的继承
!important、不迷信嵌套深度。工具可以辅助，但没法替人做设计决策。 
