csslint对less属性顺序完全无效，因其仅检查编译后的css输出，不干预less编译期的变量替换、mixin展开、嵌套解析和@import合并逻辑。
CSSLint插件无法解决Less编译生成的CSS属性顺序混乱问题——它只检查已输出的CSS，不干预Less变量、mixin展开或@import合并逻辑。
为什么CSSLint对Less属性顺序“完全无效”
CSSLint运行在CSS输出层，而Less的属性顺序错乱发生在编译期：变量替换、mixin展开、嵌套解析、@import提升等步骤早已完成，CSSLint看到的只是最终结果。它能报duplicate-property或important-rule，但不会告诉你.btn { display: flex; justify-content: center; }为什么被拆成两段、中间插进了header的样式块。
常见误判场景：
- 你写了
.btn { .flex-center(); color: red; }，但.flex-center()定义在mixins.less里，而该文件被@import (reference)引入——CSSLint看不到这个调用链，只会检查输出后的display和color是否相邻 -
@import "reset.less";写在button.less后面，但编译后reset规则出现在.btn之后——CSSLint认为“顺序合理”，因为它不感知导入顺序
真正影响CSS属性顺序的Less机制有哪些
Less中决定单个选择器内属性顺序的，只有两个因素：声明书写顺序 + mixin展开时机。其他全是干扰项。
-
.btn { @primary-color: #007bff; color: @primary-color; }→color一定在@primary-color赋值之后（因为变量赋值不输出CSS） -
.btn { .flex-center(); background: #fff; }→background一定在.flex-center()展开的所有属性之后（mixin内属性按其定义顺序插入） - 嵌套中重定义变量会改变后续调用：
&__header { @gap: 8px; margin-bottom: @gap; } &__body { @gap: 16px; padding-top: @gap; }→&__header实际取到的是16px，因为@gap被覆盖了 -
@import (reference)不影响属性顺序，但它让mixin可跨文件调用——如果button.less里调用了mixins.less里的.flex-center()，而mixins.less没被提前@import，编译直接失败，根本到不了CSSLint环节
想控制属性顺序，只能靠Less自身规则
不要指望工具链后期修正，必须在Less源码层约束行为。
- 禁止在嵌套规则中重复声明同名变量；改用
.btn-header(@gap: 8px) { margin-bottom: @gap; }封装 - mixin定义必须“原子化”：一个mixin只做一件事，避免
.flex-center()里混着align-items和padding，否则调用时属性顺序不可控 - 所有
@import集中放在入口文件顶部，且严格按「variables → mixins → base → components」排列；组件文件内部禁止@import - 禁用
javascriptEnabled（lessc默认关闭），避免JS表达式在编译期动态插入属性，打乱静态顺序
最常被忽略的一点：浏览器开发者工具里看到的“属性顺序”，其实是CSSOM解析后的结果，不是Less输出的原始顺序。如果你发现display: flex总被margin隔开，问题不在CSSLint，而在.btn里调用了两个不同mixin，而它们内部都写了display——Less允许重复属性，后写的会覆盖前写的，但CSSLint不会警告，它只当普通重复处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
