Less变量需加模块前缀（如@btn-height）且基础变量仅限base/variables.less定义；嵌套限三层并禁用&滥用；@import须集中于入口文件顶部，按reset→variables→mixins→base→components→pages顺序；Mixin参数必须用Map传递并拆分职责。
Less变量命名没加前缀，改一个就全项目飘红
Less变量没有作用域，@primary-color这种泛义名一旦在某个组件文件里被重定义，所有后续@import的文件都会继承新值——编译器不报错，但按钮、标题、边框颜色全跟着变。你看到的“飘红”其实是样式意外覆盖，不是语法错误。
常见现象：buttons.less里写了@primary-color: #007bff;，结果header.less里的h1文字也变成蓝色；更隐蔽的是，@spacing-md被误写成@spacing-md:（少分号），它和后面所有变量声明都失效，但编译照常通过。
- 所有变量必须带模块前缀：
@btn-height、@card-padding-sm、@form-input-border - 基础变量（如
@brand-blue）只允许在base/variables.less中定义，其他文件禁止直接修改 - 组件级变量文件（如
components/button/variables.less）只引用基础变量，不反向依赖
嵌套超过三层 + &滥用，调试时找不到真实选择器
Less嵌套不是BEM，.page { .header { .nav { .item { ... } } } }最终输出的是.page .header .nav .item，四层选择器在DevTools里点开要翻三次，权重还高得离谱，容易被button.btn这种更具体的选择器意外覆盖。
更麻烦的是&:hover和&__icon混用：有人写.btn { &:hover { &__icon { transform: rotate(90deg); } } }，生成的其实是.btn:hover .btn__icon，但团队里另一人写了.btn--hover .btn__icon，两个规则权重不同，行为不一致，却都“看起来有效”。
立即学习“前端免费学习笔记（深入）”；
- 嵌套严格限制三层，对应HTML结构的 container → section → element
- 修饰符必须用
&--modifier显式拼接，禁止用嵌套模拟：.btn { &--large { font-size: 20px; } } -
&__element只能出现在组件顶层类名下，不能嵌在:hover或@media里
@import位置混乱，CSS规则顺序失控
Less的@import语句在编译期被提升到文件顶部，按书写顺序展开内容。你在index.less里把@import "components/button.less";写在@import "reset.less";前面，那最终CSS里按钮样式就会排在重置样式之前——margin: 0被覆盖，所有按钮上下留白消失，但控制台不会报错。
还有人在button.less内部又@import "mixins/flex-center"，导致这个mixin被多次插入，.flex-center类重复输出，且位置不可控。CSSLint完全看不到这个问题，它只检查最终CSS，不感知导入链路。
- 所有
@import必须集中在入口文件最开头，顺序固定为：reset → variables → mixins → base → components → pages - 组件文件内部禁止
@import任何公共文件，只允许调用已注入的作用域内变量/mixin - 只提供逻辑的文件（如
mixins.less）必须用@import (reference)引入，避免重复输出样式块
Mixin参数靠位置传值，调用时错一位就静默失效
.button(@size, @variant, @rounded)这种写法，一旦某处调用写成.button(lg, primary, false)，第三个false到底控制圆角还是禁用状态？没人敢删，也没人敢改。更糟的是，如果@rounded默认值是true，漏传就等于开了圆角，而设计稿可能要求所有小按钮都不带圆角。
实际踩坑：.btn-lg.danger圆角消失，查了半天发现是button.less里@include button(lg, danger, true)的true被当成了@fullwidth，而@rounded用了默认false——参数顺序错位，编译器完全不校验。
- 全部改用Map参数：
@include button(("size": "lg", "variant": "danger", "rounded": true)) - 每个参数必须有明确键名，内部用
map-get($config, "rounded", false)取值并设默认值 - 禁止在Mixin里做多职责判断，尺寸、状态、主题必须拆成独立的
.button-size()、.button-state()、.button-theme()
