less嵌套超3层会导致选择器权重和性能失控，应删最内层嵌套而非滥用&；&后不可加空格，否则生成后代选择器增加权重；响应式与伪类需用@at-root抽离；stylelint需配置postcss-less解析器支持嵌套检查。
Less嵌套超过3层时，编译后选择器权重和性能已失控
直接删掉最内层嵌套，比补&更有效。浏览器匹配.page .layout .content .card .title时，会先找所有.title，再逐层向上验证父级是否存在——DOM越深、更新越频繁，卡顿越明显。Lighthouse报“Avoid overly specific selectors”，根源就在这儿。
常见错误现象：.card { .header { .title { color: red; } } } 编译出.card .header .title（权重 0-3-0），而它本该是.card__title（0-1-0）。这不是写法不熟，是你没看清&到底拼出了什么CSS。
- 用 VS Code 按住 Ctrl 点击编译后的 CSS 文件，直接看生成结果——别靠缩进猜
- 嵌套层级 ≥ 4 时，优先提取独立类名，如
.table-cell-actions，而非依赖缩进推导 DOM 深度 - 检查编译后 CSS，搜
.header .nav .item .link:hover这类超长选择器，确认是否真有必要保留全部层级
用&拼接类名时，空格决定输出结果
&不是“视觉上的父级”，而是上一层选择器的完整字符串副本。有无空格，输出天差地别。误加空格等于主动加权，且常导致样式失效。
错：.modal { & .close { opacity: 0.5; } } → 编译为.modal .close（多一层无意义后代关系，权重+1）
错：.list { & li { margin: 4px; } } → 实际仍是.list li，&完全没起作用
对：.btn { &__icon { display: inline-block; } } → .btn__icon（新类名，权重恒为 0-1-0）
对：a { &:hover { color: blue; } } → a:hover（伪类不增加层级计数，权重 0-1-1）
-
&后**不能有空格**，否则变成后代选择器；要拼接就写&__xxx或&--modifier - 子元素必须显式用
>：.card { > .header { > h1 { } } }→.card > .header > h1，比.card .header h1更短、权重更低 - 相邻兄弟写成
& + .sibling，漏掉&会变成全局规则
响应式与伪类嵌套必须抽离，否则权重爆炸
在媒体查询里塞满嵌套，比如@media (max-width: 768px) { .card { .body { p { font-size: 14px; } } } }，每条规则都带全前缀，体积和权重双爆炸。伪类组合复杂时（如a:not(:hover):focus），Less嵌套也很难清晰表达。
- 用
@at-root跳出嵌套：.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出平级@media规则，无冗余前缀 -
@at-root不改变逻辑归属，只控制输出位置——该平级就平级，不带父前缀 - 避免
@at-root套@at-root：嵌套两层不会报错，但会让意图模糊，调试时难定位来源 - 伪类/伪元素必须用
&:或&::开头，否则会丢失父级上下文，比如单独写:hover会变成全局:hover
Stylelint 配置必须显式支持 LESS 嵌套语法
Stylelint 默认不解析 LESS 嵌套，selector-nest-limit这类规则根本不会触发，更别说自动修复。VS Code 插件只会读取项目级配置里的customSyntax，settings.json里设无效。
- 安装对应解析器：
npm install --save-dev postcss-less - 在
stylelint.config.js中声明：customSyntax: "postcss-less" - 规则集必须用
stylelint-config-standard-less，别混用stylelint-config-standard-scss - 启用
"editor.codeActionsOnSave": {"source.fixAll.stylelint": true}，并关闭"editor.formatOnSave": false - 想全量修复，得跑 CLI：
npx stylelint "**/*.less" --fix
.form .input.has-error改成.input--error——这一步不靠工具，靠对 BEM 职责边界的清醒认知。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
