less嵌套不提升性能，仅优化可读性；超3层致权重失控（如.card .header .title .icon为0-4-0），应改用bem命名（&__body）、禁用布局类深层嵌套，并用&显式绑定父级。
Less嵌套本身不提升运行时性能，只解决人读代码时的结构认知问题；用错地方反而让选择器权重失控、调试困难、复用归零。
嵌套层级超过3层时，CSS选择器权重会失控
比如 .card { .header { .title { .icon {} } } } 编译后是 .card .header .title .icon，权重达 0-4-0，比单类名 .icon 高出整整四级。后续想覆盖它，得写 .icon + 更高权重的选择器，或者加 !important —— 这就违背了 BEM 和模块化初衷。
- 检查编译输出：一旦看到类似
.page .layout .content .section .item这种5级以上组合，说明该拆成独立组件类了 - 超三层嵌套必须警觉：不是“不能写”，而是“该换思路”——改用
&__body、&--hover显式表达语义，而不是靠缩进模拟 DOM 深度 - 布局类（如
.container、.row）禁用深层嵌套，它们本该解耦复用，嵌套反而掩盖职责分离问题
媒体查询里嵌套必须显式用 & 绑定父级
@media (max-width: 768px) { .nav { li { a {} } } } 编译后是全局 a，不是 .nav li a。Less 不知道你要绑定到父选择器上，因为没加 &。
- 正确写法是：
@media (max-width: 768px) { .nav { & li { a {} } } } - 伪类/伪元素必须写成
&:hover、&::before，&后紧跟冒号，中间不能有空格 - 拼接类名用
&.is-active（无空格），后代选择器才用& .child（有空格） - 子选择器必须显式写
& > .item，默认空格就是后代关系，缩进不等于 DOM 子节点
& 符号不是自动拼类名的魔法开关
& 只是把当前选择器和父级按规则连接，用错位置会破坏 BEM 语义，生成不可组合的选择器。
-
.card { .header { &__logo {} } }→ 编译为.card .header .card__logo：多出无意义的.header层级，权重升高且语义断裂 -
.form { &__field { &:focus { &::placeholder {} } } }→ 已跨三层（块→元素→伪类→伪元素），DevTools 中很难定位来源 - 唯一安全的 BEM 拼接写法是
&__title，它能保证编译后是.card__title，语义清晰、可复用、支持组合 - 别用插值
@{var}动态拼类名，VS Code 插件无法识别，lint 工具失效，也不符合 BEM 静态契约原则
真正难的不是语法怎么写，而是每次敲下 { 前，得问自己一句：这个嵌套是否真的表达了强语义关联？还是只是为了让代码“看起来像 HTML”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
