normalize.css 必须作为首个样式资源加载，否则 button 边框残留、input 对齐错位、h1 大小不一等问题复现；bem 组件需显式声明 box-sizing、font-family 等关键属性，禁用 reset.css 混用，避免选择器优先级冲突。
Normalize.css 必须在所有自定义 CSS 之前加载
它不是兜底补丁，而是样式基线——加载顺序错，button边框残留、input垂直对齐错位、h1大小不一致等问题会直接复现。常见错误是把它 @import 到某个组件 SCSS 文件里，或放在 <link> 链的第二位。
正确做法只有一条：确保它作为第一个样式资源注入。
- HTML 中用
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">，且必须排在最顶部 - Vite / Webpack 项目里，别
import 'normalize.css'到main.js或某个组件；应直接写进index.html的 - 若用 Emotion / Styled Components，需显式启用
prepend: true，否则生成的<style></style>标签会插入到 DOM 末尾，失去基线意义
BEM 组件样式不能依赖 Normalize.css 的“默认值”
比如你写 .btn_primary { font-weight: bold; }，但没设 font-family 或 line-height，就可能在 Safari 和 Chrome 中渲染出不同高度——因为 Normalize.css 只统一了基础继承行为，并未设定全局字体栈或行高基准。
所以 BEM Block 层级（如 .weui-btn）必须显式声明关键盒模型与文本属性：
- 紧跟 Normalize.css 后加一行：
* { box-sizing: border-box; }，否则.weui-btn { width: 100%; padding: 8px; }在某些浏览器下会撑破容器 - 在 base 层定义
html { font-size: 100px; }（用于 rem），而不是靠 Normalize.css 的默认16px——它不控制缩放逻辑 -
.weui-btn应包含font-family: system-ui, -apple-system, sans-serif;，Normalize.css 只做了 fallback 修正，不指定具体字体链
不要混用 Reset.css 和 Normalize.css
二者设计哲学冲突：reset.css（如 Eric Meyer 版）把 ol、ul 的 list-style 归零，sub/sup 偏移清空；而 normalize.css 保留这些语义化表现。BEM 结构中若用到 .list__item 或 .text_sub，混入 reset 会导致样式断裂且难以定位。
检查项目依赖树，确认没有同时安装 reset-css 和 normalize.css；若有历史遗留 reset 规则，必须全部删除，不能“留着备用”。
- 搜索项目中是否出现
* { margin: 0; padding: 0; }或body { margin: 0; }类规则——这是典型 reset 残留 - 用浏览器开发者工具检查
button元素 computed styles，看margin是否来自normalize.css（通常是0.5em），而非0 - 如果用了 PostCSS，推荐配
postcss-normalize插件，在构建时自动注入，避免手动维护路径出错
Normalize.css 后的 BEM 类名要避免过度特异性覆盖
Normalize.css 使用较具体的选择器，例如 button, [type='button'], [type='reset'], [type='submit']，它的 margin 规则优先级高于 .btn { margin: 0; }。如果你在 BEM Element 上写 .weui-btn__text { margin: 0; } 却没生效，大概率是被 Normalize.css 更宽泛的规则压住了。
解决方式不是加 !important，而是提升选择器精度或利用层叠顺序：
- 用块级作用域限定：
.weui-btn .weui-btn__text而非单独.weui-btn__text - 在 BEM Block 定义中直接重置子元素：
.weui-btn { margin: 0; } .weui-btn > * { margin: 0; } - 避免在 Modifier 中仅改单个属性，如
.weui-btn--large { padding: 12px 24px; }应配套重置font-size和line-height，否则和 Normalize.css 的基础行高叠加后可能溢出
真正容易被忽略的，是 Normalize.css 不处理任何布局逻辑——它不管 Flex、Grid 回退，也不管 rem 缩放异常。BEM 命名再规范，若 base 层没补上 box-sizing 和字体基准，按钮在 iOS 双击放大后就会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
