normalize 与 reset 的取舍

前言: 在一次开发的时候, 发现团队中的小伙伴对 normalize 与 reset 都持有不同分歧. 趁着这事来谈谈, normalize 与 reset 都有什么区别，该如何进行取舍。

reset

reset, 顾名思义就是重置的意思. 最早的一份CSS reset来自Tantek的undohtml.css, Tantek根据自己的需要，对浏览器的默认样式进行了一些重置。

早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题, reset 的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”.

此后国内出现* {margin: 0, padding: 0}这种暴力清除全部样式的reset出现.

normalize

Normalize, 从字面上也理解也就是使其正常化. 这是css reset的一个代替方案.
Normalize相对「平和」, 注重通用的方案，重置掉该重置的样式，保留有用的user agent样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。

创造normalize.css的目的主要是:

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

相比两者的利弊

那么相对来说, 两者之间又有什么区别呢? 这里引用一下知乎用户的回答.

CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧
Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。

然而在实际项目中, 为了还原设计图我们并不需要这种自带特性, 因此可以根据项目的需求将我们常用的标签进格式化, 但也不是跟传统的reset那样粗暴.

因为传统的reset的很多清除默认样式是无意义的, 是浪费性能的. 就比如<li>, 人家生来就没有margin padding, 干嘛非要给人家加个margin: 0上去呀??? h1~h6标签虽然有margin没有padding呀! 也不要一棒子全打死啦! 其实这是不严谨的态度.

以下的代码可以作为针对项目需求的进行调整. 这样看下去是不是舒服简洁多了呢? 也减少了很多无意义的性能损耗何乐而不为呢.

  body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, ol, ul {
  margin: 0;
}

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

a {
  text-decoration: none;
}

body {
  font: 14px/1.6 Monda,PingFang SC,Microsoft YaHei,sans-serif;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
}

.clearfix:after {
  clear: both;
}

参考资料: