<p>reset.less应只含三类内容：基础盒模型统一（* { box-sizing: border-box; }）、关键表单控件还原（button, input, select, textarea { font: inherit; line-height: normal; }）、带!default的变量与参数化Mixin（如@reset-font-size: 16px !default; .reset-body() { margin: 0; font-size: @reset-font-size; }），严禁强覆盖html/body及直接复制Meyer或Normalize原始CSS。</p>
别直接抄 Meyer 或 Normalize 的原始 CSS 进 Less 文件——编译能过，但后续维护会卡死在变量缺失、作用域错乱、第三方组件样式崩坏上。
Less 里写 reset.less 应该只放三样东西
真正可维护的 reset.less 不是“把浏览器所有默认样式打平”，而是为项目提供可配置、可复用、不干扰第三方的基础层：
-
* { box-sizing: border-box; }—— 必须放在最前，且不能包裹在任何@media或嵌套规则里 -
button, input, select, textarea { font: inherit; line-height: normal; }—— 关键表单控件还原，避免字体继承断裂或行高异常 - 带
!default的变量和参数化 Mixin，比如：@reset-font-size: 16px !default;、.reset-body() { margin: 0; font-size: @reset-font-size; } - 严禁写
html, body { margin: 0; }这类强覆盖规则——现代 UI 库（如 Ant Design）内部已做适配，你提前重置反而触发冲突
@import (multiple) 是唯一能让变量和 Mixin 全局生效的方式
很多人在 button.less 里调用 .reset-body() 报错 Mixin is not defined，不是路径错了，是 Less 默认作用域隔离：
- 只写
@import "reset.less";→ 每个文件只能导入一次，header.less和footer.less都导入就会编译中断 - 写成
@import (multiple) "../base/reset.less";→ 允许重复导入，变量和 Mixin 才能被所有下游文件识别 - 别用
@import (reference)—— 它不输出 CSS，基础重置样式就丢了 - 别省略引号或后缀：
@import "reset"在 Less 5+ 中已不可靠，必须写全"reset.less"
引入 Normalize.css 要加 (css) 标志，否则直接报 SyntaxError
Less 编译器默认把 @import 当作 Less 模块解析。你写 @import 'normalize.css';，它会试图把 html { margin: 0; } 当作 Less 语法去编译，结果就是：
立即学习“前端免费学习笔记（深入）”；
- 报错
ParseError: Unrecognised input或静默丢弃样式 - 正确写法是：
@import (css) "~normalize.css/normalize.css";（Webpack 场景）或@import (css) "./node_modules/normalize.css/normalize.css"; - 如果要用 Less 封装 Normalize，只能手动复制其内容到
normalize.less，再用@import (multiple)导入——但不如直接走(css)省事 - 注意：(css) 导入的文件不会参与 Less 变量替换，所以不能在里面写
@primary-color这类引用
重置样式污染第三方组件？优先用 scoped 重置而非全局
全局 @import 之后，Ant Design 的 Button 或 Element Plus 的 Input 突然变矮、字体错位，大概率是你重置了 font、line-height 或 box-sizing，而它们内部已按浏览器默认行为做了精细适配：
- 解决方案不是“关掉 reset”，而是限制作用域：
.app-reset { * { box-sizing: border-box; } button, input { font: inherit; } }，再在根容器上加 class - 或者用 CSS 层叠控制：给第三方组件加
html :where(.ant-btn) { all: revert; }（需检查浏览器兼容性） - 更稳妥的做法：只在自研组件里用
.reset-body()这类 Mixin，第三方组件保持原样 - 永远检查 DevTools 的 Computed Styles，确认是哪条 reset 规则覆盖了预期值——很多时候问题出在
fieldset { border: none; }这种“顺手加的”规则上
真正难的不是写多少行 reset，而是判断哪些该重置、哪些该保留、哪些该收进 Mixin、哪些该留给组件自己处理。越早放弃“一劳永逸”的全局重置幻想，越快进入可控的样式演进节奏。
