不推荐直接用 normalize.css 的 Less 版本，因其多为社区非官方移植，常存在变量未解耦、嵌套错乱或混入私有 mixin 等问题，易致编译报错或样式覆盖；应优先使用官方 normalize.css 并通过 @import (css) 引入。
为什么直接用 normalize.css 的 Less 版本不推荐？
因为官方 normalize.css 本身是纯 CSS，normalize.less 多为社区非官方移植，常存在变量未解耦、嵌套层级错乱、或混入了项目私有 mixin 的问题。直接 @import "normalize.less" 后，可能触发 Less 编译报错（如 Variable @color is undefined），或导致后续样式被意外覆盖。
- 优先使用官方发布的
normalize.css文件，通过@import (css) "normalize.css"告诉 Less 编译器“别处理它，原样塞进去” - 若坚持用 Less 版本，务必确认其来源是
npm install normalize-less这类维护较新的包，且检查其package.json中的main字段是否指向无依赖的独立文件 - 不要把
normalize.less放进你自己的variables.less之前引入——它不该依赖你的变量，反过来才对
reset.less 自定义时，哪些选择器必须保留？
自写 Reset 不等于清空所有默认样式。比如 input[type="search"] 在 WebKit 下自带圆角和背景，但清掉 appearance 可能破坏可访问性；又如 button 的 cursor: pointer 被重置后，用户无法感知可点击。
- 必留：全局盒模型重置 ——
* { box-sizing: border-box; }（注意 IE8+ 支持，旧项目需确认） - 必留：表单控件基础还原 ——
button, input, select, textarea { font: inherit; line-height: normal; } - 慎删：
html和body的margin，某些 UI 框架（如 Bootstrap）依赖其为 0，但若你用的是现代布局（Flex/Grid），留 0 更安全 - 避免通配符重置字体颜色/大小——会干扰系统偏好设置（如 macOS 的“增大字体”辅助功能）
如何让 Reset 只作用于局部组件而不污染全局？
Less 支持作用域嵌套，但 reset 类名若直接写成 .my-app { * { ... } } 会导致编译出冗长的选择器（如 .my-app *:not(html)），且无法覆盖浏览器原生 user agent stylesheet 的 specificity。
- 用
:where()降低权重（需目标环境支持 Safari 14.1+/Chrome 88+）：:where(.my-app) * { margin: 0; } - 更兼容的做法：给容器加唯一 class（如
data-reset="scoped"），然后写[data-reset="scoped"] * { ... } - 绝对不要在 scoped reset 里用
html或body选择器——它们永远在根级，scoped 无效 - 如果组件要 SSR 渲染，确保 reset 规则在服务端和客户端注入顺序一致，否则 FOUC 风险上升
Normalize 和 Reset 混用时，谁该先加载？
顺序错了，normalize.css 里修复的 UA 差异会被你后续的 Reset 覆盖掉。例如 normalize 保证了 h1 在各浏览器中都有合理 margin，但如果你在它之后写 h1 { margin: 0; }，就白做了。
立即学习“前端免费学习笔记（深入）”；
- 严格顺序：先
@import (css) "normalize.css"，再@import "reset.less"，最后才是业务样式 - 验证方式：打开 DevTools → Elements → 找一个
button，看 computed 样式中font-family是否继承自html（normalize 的效果），而不是显示initial（说明被 reset 干掉了） - 如果用了 PostCSS 插件（如
postcss-normalize），它会在 CSS 层自动前置 normalize，此时你的 Less 里就不该再手动 import 任何 normalize 相关文件，否则重复
实际项目中最容易被忽略的，是 normalize.css 对 details/summary、dialog 等新语义标签的处理——这些在旧版 Reset 里根本没考虑，但现代组件库已开始用。不前置 normalize，这类标签的默认折叠行为可能直接失效。
