less中@import顺序错误导致css层叠顺序反转，重置样式未置顶使浏览器默认值生效，box-sizing未覆盖伪元素，泛化类名被提前导入覆盖组件样式，viewport和字体基准未随重置同步加载，应将重置与基础样式打包为单个base.css同步引入。
Less中@import顺序不同导致布局错位，根本不是“属性顺序乱了”，而是**CSS层叠顺序被意外反转**——后写的样式规则本该覆盖前者的，结果因为导入位置错位，反被前者盖掉。
重置样式没在最前面，浏览器默认值就偷偷生效
比如你在components/button.less里写了.btn { padding: 8px 16px; }，但base/reset.less是后面才@import的，那最终CSS里button元素仍保留浏览器默认的padding: 2px 6px（Chrome）或4px（Firefox），叠加你写的8px后实际变成12px或12px以上，按钮就撑大、错位。
- 重置必须显式归零
margin/padding，且只针对body、h1–h6、ul、form等关键标签，不能靠* { margin: 0; } -
box-sizing: border-box要带上::before和::after伪元素，否则border和padding会额外加宽 - 如果
reset.less被放在variables.less之后，而variables.less里又用了@import (reference)引入混入，重置可能被跳过编译
组件样式被更早的通用类意外覆盖
你写了一个.card-header，希望它有font-weight: bold，但项目里有个utils/typography.less里定义了.header { font-weight: normal; }，且它被提前@import了。最终CSS里.header排在.card-header前面，又因为两者权重相同（都是类选择器），.header的normal就赢了。
- 避免用泛化类名如
.header、.title，改用命名空间前缀，例如.card__header - 所有工具类（如
.text-center）应集中放一个utils/helpers.less，且必须在组件样式之后导入，否则会污染业务组件 - 不要在
components/card.less内部再@import "utils/mixins.less"，这会让mixins.less的样式块插入点不可控
viewport 或字体基准没随重置一起加载
布局错位常发生在移动端，表面看是flex没对齐，实则是html { font-size: 16px; }写在base/typography.less里，但它被放在reset.less之后导入，而reset.less里又漏掉了html的font-size重置——导致rem计算失准，栅格偏移。
-
meta name="viewport"必须出现在最顶部，前面不能有任何JS或注释，否则iOS Safari按980px渲染 -
html或body的font-size和line-height必须在重置文件里统一设好，不能分散到多个文件 - 如果用
@import (reference)引入变量文件，确保它在重置之前导入，否则@base-font-size在重置里无法使用
真正容易被忽略的是：**重置和基础样式必须打包成单个base.css，通过<link>同步加载，而不是靠@import在Less里拼接**——后者在HMR或构建缓存下容易出现顺序抖动，尤其当路径别名配置不一致时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
