modern css reset 以克制方式统一浏览器默认样式，保留语义与可访问性：仅重置 body/h1–h4/p 等关键元素；必须包含 、::before、*::after 的 box-sizing；列表与链接按 role 和 class 精准控制；表单控件和图片需 font: inherit 与 max-width: 100%/display: block。
Modern CSS Reset 不是“清零一切”的暴力方案，它用更克制的方式解决浏览器默认样式带来的不一致问题，同时保留可访问性、语义化和现代排版基础。直接上手就能用，但关键在理解哪些规则不可删、哪些必须前置、哪些容易被后续样式意外覆盖。
为什么不能只用 * 选择器重置 margin/padding
看似简单粗暴的 * { margin: 0; padding: 0; } 会破坏很多隐式语义行为：
-
button和input失去默认内边距，点击区域变小，影响可访问性 -
h1–h6全部塌陷为无间距，破坏文档流层级感知 -
fieldset、legend等表单容器样式被抹平，屏幕阅读器可能误判结构 - 没有处理
box-sizing，后续写width: 100%时仍可能溢出
Modern CSS Reset 明确只重置真正需要统一的元素，比如 body、h1–h4、p、figure、blockquote，既控场又留白。
box-sizing: border-box 必须作用于所有伪元素
只写 * { box-sizing: border-box; } 不够——它不包含 ::before 和 ::after。而现代组件（如 Tooltip、Badge）大量依赖伪元素生成装饰内容，一旦它们用 content + padding 布局，却走默认 content-box 模型，尺寸就会失控。
正确写法必须是：
*, *::before, *::after {
box-sizing: border-box;
}
漏掉 ::before 或 ::after 是线上布局错位的隐蔽元凶之一，尤其在使用 Tailwind 的 before:content-[""] 类时极易暴露。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
列表与链接的 role-aware 重置逻辑
Modern CSS Reset 对列表的处理不是简单写 ul, ol { list-style: none; }，而是：
ul[role='list'], ol[role='list'] {
list-style: none;
}
这个细节很关键：
- 普通
ul仍保有默认圆点（语义未破坏），方便快速原型或 CMS 输出 - 只有明确声明
role="list"的才被清除，说明开发者已主动放弃原生语义，转为自定义渲染 - 避免误杀
nav ul中用于导航菜单的列表（它们常需保留list-style-type: none，但不该靠全局规则硬塞）
同理，a:not([class]) 只对无 class 的原生链接启用 text-decoration-skip-ink，既提升可读性，又不干扰带 class 的按钮类链接（如 btn btn-primary）。
字体继承与图片渲染的隐性依赖项
这两条规则常被忽略，但直接影响首屏体验：
-
input, button, textarea, select { font: inherit; }：防止表单控件在某些 OS（如 macOS）中使用系统等宽字体，导致与页面字体割裂 -
img, picture { max-width: 100%; display: block; }：display: block消除行内图片底部默认空白（由基线对齐引起），这是老问题但至今仍有项目因没加这句而出现莫名间隙
它们不炫技，但缺一不可。如果你发现表单输入框字体突兀变小，或图片下方总有一像素空隙，先查这两行有没有漏。
Modern CSS Reset 的真正难点不在代码本身，而在团队协作时能否守住「只增不删」原则——一旦有人为了某个临时效果注释掉 ul[role='list'] 规则，后续所有用 role="list" 的卡片列表都会回归圆点，而这种回归往往不会立刻在 PR 中被肉眼识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
