开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

背景

笔者今天接手了一个旧项目，项目的 CSS 部分不太规范，没有一份集中的重置样式的文件，而是遇到什么问题就在那个元素上写 class/style 来解决，这样做很不清晰，不好维护。于是笔者决定自己写一份 reset.css 来解决这个问题。

为什么要重置样式？

前端工程师都知道，有些浏览器的默认样式很不美观，比如 ul>li 标签的一系列前缀点、a标签的下划线，它们已经不适合现代的 WEB 应用，需要我们设计样式来覆盖它们。

所以，笔者根据项目需求以及网上的解决方案，输出了一份重置样式的方案如下，请掘友们多多指教🍺🍺。

方案

启用 IE 盒模型

笔者第一条重置样式是将所有元素的盒模型设置为 IE盒模型，也就是设置 width/height 时，将盒子的 border 和 padding 都计算在内。

*,
*::before,
*::after {
  box-sizing: border-box;
}

这样做的好处是：

当我要改变盒子的 width/height 时，我不用考虑它的 padding/border，设置多少宽高，最后它的可视区域就是多少宽高，降低了很多处理盒子的工作量。

这也是 MDN 推荐的做法，掘友们可以点击这里查看。

重置 body 的外边距为 0

我们知道，body 标签的默认外边距有 8px:

这是笔者项目中不需要的，我想大部分项目都是一样的，需要从头设计样式，而 body 的可视区域应该充满整个屏幕，所以下面去掉这多余的外边距：

body {
  margin: 0;
}

去掉 ul,ol 的列表项前缀

有序列表/无序列表 默认样式时会在列表项前面加前缀，如：

这是非常不美观的，需要前缀我们可以自己实现，自定义样式，这里不需要它们：

ul,
ol {
  list-style: none;
}

并且，ul/ol 还自带了内外边距，这也是笔者不希望的，一并去掉：

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

表单控件大调整

对于 input，textarea，select， button 这些表单控件，浏览器会给它们的字体/字色/字间距一套单独的样式，而笔者希望它们都是继承自项目本身的配置。

另外，它们的边框和轮廓都是本项目不需要的，一并修改掉。

最后重置如下：

input,
textarea,
select,
button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  border: none;
  outline: none;
}

媒体元素独占一行

对于图片/视频等媒体，界面中要独占一行以保持美观，所以重置如下：

img,
video,
object,
iframe,
embed {
  display: block;
  max-width: 100%;
}

方便地隐藏元素

我们知道，当标签添加了 hidden 属性时，浏览器会将其隐藏，原理是增加了 display: none 样式。

然而，实际开发中经常要给元素添加 display 样式，这样就会把隐藏的样式覆盖，导致 hidden 的效果消失。

因此，笔者单独给它加了样式，用来提高 hidden 的优先级，防止意外地覆盖：

[hidden] {
  display: none !important;
}

成果

最终的 reset.css 内容如下：

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

input,
textarea,
select,
button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  border: none;
  outline: none;
}

img,
video,
object,
iframe,
embed {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

总结

本文是笔者调研重置样式的一篇介绍，最终输出了方案并应用到了实际项目中。

本文包含 HTML5，CSS3 以及浏览器默认样式的一些知识，笔者水平有限，描述不足之处，请掘友们多多批评指正。

另外，如果您有更好的方案，欢迎在下方留言👏，笔者必定会回复、讨论，大家一起加油，共同进步 🎉

「保持学习主动思考坚持输出」，我是前端涤生，希望这篇文章可以帮到您🍺🍺

参考

「CSS 重置样式」的调研与应用

背景