嵌套超过三层会导致选择器权重失控，如 .card .header .title .icon 权重达0-4-0，难以覆盖；应采用bem命名（如&__body、&--hover）而非缩进模拟dom深度，布局类禁用深层嵌套，伪类必须写成&:hover，媒体查询内需用&显式绑定父级，嵌套仅为提升可读性而非优化性能。
嵌套超过三层就会让选择器权重失控
编译后生成的 .card .header .title .icon 权重是 0-4-0，比单类名 .icon 高出整整四级，后续几乎无法用常规方式覆盖。这不是“写得漂亮”，而是埋了样式冲突的雷。
- 真正可控的方式是主动用
&__body、&--hover构建 BEM 命名空间，而不是靠缩进模拟 DOM 深度 - 布局类（如
.container、.row）禁用深层嵌套——它们本该解耦复用，嵌套反而掩盖职责分离问题 - 检查编译输出，如果看到类似
.page .layout .content .section .item这种 5 级以上组合，说明该拆成独立组件类了
用 & 拼接伪类时漏空格会直接报错
.link:hover 和 .link :hover 是两回事。Less 里写成 .link{:hover} 或 .link:hover（无空格）会被解析为标签选择器，报 Unknown word 错误。
- 伪类/伪元素必须写成
&:hover、&::before，&后紧跟冒号，中间不能有空格 - 拼接类名用
&.is-active（无空格），后代选择器才用& .child（有空格） - 子选择器必须显式写
& > .item，不能依赖缩进——默认空格就是后代关系
媒体查询里嵌套必须加 & 显式引用父级
@media (max-width: 768px) { .nav { a {} } } 编译后是全局 a，不是 .nav a。因为没加 &，Less 不知道你要绑定到父选择器上。
- 正确写法是：
@media (max-width: 768px) { .nav { & a {} } } - 否则媒体查询内嵌套三层（比如
.nav { li { a {} } }）会导致调试定位困难，且编译后选择器冗长、易被更高权重规则覆盖 - 开启
--strict-math=on和--strict-units能提前捕获这类语法歧义
嵌套本质是给人看的，不是给浏览器优化的
Less 嵌套不改变最终 CSS 的运行时性能，它只影响人读代码时的认知负荷。写 .modal { &__header {} &__footer {} } 是为了表达语义强关联；写 .container { .row { .col-6 {} } } 就是在自欺欺人。
- 适合嵌套的场景：组件内部样式强耦合，比如表单控件的状态组合、卡片内标题/描述/操作区的布局约束
- 不适合的场景：跨模块复用的原子类（如
.text-center）、工具类、响应式断点切换 - 每次敲下
{前得想清楚：这个结构是给机器执行的，还是给人看的？前者要克制，后者要可追溯
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
