Less循环生成的类名顺序不影响样式生效，真正起作用的是选择器权重、导入顺序和特异性；.order-*类仅在父容器启用flex布局时才生效，且order值相同时按HTML源码顺序排列。
Less 循环生成的类名在最终 CSS 中“顺序不正确”，根本不是循环本身的问题，而是你误把「编译输出顺序」当成了「CSS 层叠顺序」——类名出现位置对样式生效几乎没影响，真正起作用的是选择器权重、导入顺序和特异性。
循环生成的类名在 CSS 文件里为什么排得乱？
Less 的 .loop-order() 这类递归 mixin 输出的规则，会按调用时机插入到当前作用域中，而不是固定排在文件末尾。如果你在多个地方调用它（比如 components.less 和 layout.less），它们的输出就会穿插在各自被调用的位置。
- 循环本身不控制全局顺序，只控制单个 mixin 块内的规则顺序
- 最终 CSS 里
.order-1出现在.order-12后面，完全正常；浏览器不靠这个排序 - 想让所有
.order-*集中出现在 CSS 开头？必须把循环统一挪到入口文件最顶部的@import之后、其他样式之前
为什么加了 .order-5 类却没看到元素排序变化？
这不是顺序问题，是 Flex 上下文缺失。生成的类只定义 order 值，但该值仅在父容器启用弹性布局时才参与排列。
- 父元素没设
display: flex或display: inline-flex→order完全无效，且不报错 - 父元素用了
flex-direction: column-reverse→ 视觉顺序与order值反向，容易误判“没生效” - 子元素同时有
float或position: absolute→ 脱离 Flex 流，order被忽略
为什么两个 .order-3 类同时存在，元素却没按预期排列？
CSS 的 order 值相同时，浏览器严格按 HTML 源码顺序排列，跟类名书写先后、CSS 文件里哪条规则在前都无关。
立即学习“前端免费学习笔记（深入）”；
-
<div class="order-3">A</div><div class="order-3">B</div>→ A 一定在 B 左侧（或上方） - 哪怕你在 CSS 里把
.order-3的规则写在.order-2后面，也不影响这个行为 - 别试图靠调整类名在 HTML 中的顺序来控制排列——那是语义倒置，应改用不同
order值或重构 DOM
最容易被忽略的一点：循环生成的类只是“工具”，不是“上下文”。它们不会自动激活 Flex 行为，也不会修正 DOM 结构缺陷。排查时优先确认父容器是否真正在用 Flex，而不是盯着 CSS 文件里 .order-1 是不是排在第一行。
