我的经验是，如果项目设计非常独特，甚至有些“反常规”，那么Reset CSS可能更合适，因为它提供了一个干净的画布。但如果项目更注重效率，或者设计风格相对主流，那么Normalize.css，或者一个基于Normalize.css的轻量级自定义方案，会是更好的选择。它在“一致性”和“可用性”之间找到了一个很好的平衡点。

打造一个轻量级的自定义CSS样式基线：兼顾效率与掌控力

说到底，无论是Reset还是Normalize，它们都只是工具。在实际开发中，我更倾向于根据项目的具体需求，从两者中汲取精华，构建一个属于自己的、轻量级的自定义CSS基线。这不仅能减少不必要的CSS代码，还能让我对项目的初始样式有更强的掌控力。

以下是一个我常用的自定义基线思路和一些关键代码：

/* 1. 统一盒模型：这是现代CSS布局的基石，强烈推荐 */
html {
  box-sizing: border-box;
  /* 统一字体大小，方便rem单位计算 */
  font-size: 16px; /* 或根据设计稿调整 */
}

*, *::before, *::after {
  box-sizing: inherit; /* 继承html的box-sizing设置 */
}

/* 2. 移除所有元素的默认外边距和内边距：这是最常见的布局干扰源 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, figcaption, hr,
fieldset, legend, textarea, input, button, select {
  margin: 0;
  padding: 0;
}

/* 3. 统一列表样式：通常我们都会自定义列表样式，所以先移除默认的 */
ol, ul {
  list-style: none;
}

/* 4. 确保图片响应式且避免底部空隙：防止图片下方出现多余的空白 */
img, picture, video, canvas, svg {
  display: block; /* 将图片设为块级元素，消除基线对齐问题 */
  max-width: 100%; /* 确保图片不会溢出父容器 */
  height: auto; /* 保持图片宽高比 */
}

/* 5. 链接样式：通常会移除下划线，颜色则根据主题自定义 */
a {
  text-decoration: none;
  color: inherit; /* 继承父元素的颜色，而不是默认的蓝色 */
}

/* 6. 表单元素：统一一些基础样式，让它们在不同浏览器下表现更一致 */
button, input, select, textarea {
  font-family: inherit; /* 继承父元素的字体，而不是浏览器默认字体 */
  font-size: inherit; /* 继承父元素的字号 */
  line-height: inherit; /* 继承父元素的行高 */
  border: none; /* 移除默认边框，方便自定义 */
  background-color: transparent; /* 移除默认背景色 */
  color: inherit; /* 继承父元素的颜色 */
}

/* 7. 文本元素：一些基础的文本处理 */
strong, b {
  font-weight: bold; /* 确保加粗效果 */
}

em, i {
  font-style: italic; /* 确保斜体效果 */
}

/* 8. 避免焦点轮廓被移除：为可交互元素提供可见的焦点状态，提升可访问性 */
*:focus-visible {
  outline: 2px solid var(--focus-color, blue); /* 默认蓝色，或自定义变量 */
  outline-offset: 2px;
}
/* 也可以在某些特定场景下，比如点击按钮时，用JS控制移除outline，但默认不移除是更好的做法 */

这个自定义基线结合了Reset的“清零”思想（比如

margin

padding

font-weight: bold

box-sizing: border-box;

width

height

padding

border