我们真的需要CSS重置来清除默认样式吗？

时间：2022-05-29 16:42:01 | 来源：网络营销

时间：2022-05-29 16:42:01 来源：网络营销

每个浏览器都有他自己的一个默认样式，用来保证HTML在没有自定义样式的情况下也能被有据可循的渲染，比如：未访问的链接是蓝色、访问过的是紫色、strong标签加粗显示、H1的字号大一些。然而，各厂商就是喜欢让我们的生活丰富多彩一点，然后每个浏览器的默认样式都不相同。所以，你怎么能保证你的自定义样式不会被浏览器的默认样式影响呢？

1、CSS重置

css reset即css重置，也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。

通常我们用CSS重置来清除浏览器内置的默认样式，所有的字体和line-height都设置为100%，margin、padding设置为0px，去掉border，列表也无样式。

Eric Meyer的CSS重置方案是第一个也是被大家广泛使用的，HTML5 doctor的HTML5 Reset Stylesheet也可以帮助设置一些新的元素（具体可查看亿企邦的《解析HTML5页面元素的嵌套规则及引起的错误问题》相关介绍）。

2、应该使用CSS重置吗？

我随便看了30个网站，其中大多数都使用了CSS重置。他的优点很明显：

（1）、可以提供完全空白的画布，然后你就可以自己定义相应的样式了。

（2）、开发更加有逻辑性：你只是添加样式而不是移除和修改。

（3）、浏览器的兼容性问题可以降到最小。

尽管有这些优点，但是我还是不使用CSS重置。实际上，也不完全正确，我会使用margin和padding的重置，因为默认的实在是没用，如下所示：

* { padding: 0; margin: 0; }

有的人会觉得这样的写法会影响到所有的标签，有的开发者会告诉你这会让CSS的渲染效率变低，但目前为止亿企邦还没遇到过这样的问题。

3、我对CSS重置的6个疑问

当您静下心来，审视你这几年对CSS的使用，您再去思考CSS重置，从它的历史，从它繁盛的原因，去思考CSS重置的本质，标签的意义，您就会发现，CSS重置这个概念本不应该流行与繁盛，虽然它有道理，但是实际上是个可有可无的东西。对此，亿企邦可以从以下几个方面阐述我的观点：

（1）、增加页面的大小

大多数CSS重置文件都在2kb左右（未压缩），听着不大，但是如果我的CSS总共才10kb，那么这就不是个小数字了（具体可查看亿企邦的《CSS常用代码使用技巧大全》相关介绍）。

（2）、额外的影响

CSS重置需要你去重置所有的元素，增加文件大小，有些时候，浏览器默认还是不错的，字体大小，行间距，链接边框以及列表样式都还是不错的，如果不行，亿企邦建议你可以再单独去改。

（3）、不同的浏览器渲染页面也不同

没有哪两个浏览器渲染出来的页面是完全相同，一像素不差的，CSS重置给人的感觉就好像要完成这个目标，其实不行。

一般情况下，大多数人并不在乎Firefox下面的标题比IE下面的大2px，或者Opera的bold属性比Chrome的更加好看，实际上，CSS重置也解决不了这个问题（具体可查看亿企邦的《资深Web前端开发工程师教你如何优化CSS框架》相关介绍）。

（4）、不否认对浏览器的测试

亿企邦不是太认可CSS重置在各浏览器下面的一致性，你必须在很多的设备和浏览器下面测试你的网站或者程序，才能定位到错误到底是你的代码还是浏览器的问题。

（5）、工作习惯的不同

我不太使用CSS框架，我很少能遇到可以在正在建设的网站中通用的CSS方案，我可能会从其他地方copy一些代码过来，但是一般我还是喜欢从空文件开始写。他完全是我的代码，我能很快知道问题在哪。

虽然不是那么复杂，但是CSS框架中的重置代码经常导致一些问题。

（6）、并不节省时间

首先，在做CSS重置之前，我们要先问下自己：CSS重置真的节省了你的开发时间吗？

在我被CSS重置的支持者攻击之前，我先声明，并不是永远都不用。可能对你来说有用，但是对那些新的WEB开发人员是否同样有用呢？当你要添加一个CSS重置代码的时候，是真的有用呢？还是只是一个习惯而已？

对此，亿企邦建议你可以做一个测试，从你的网站里面去掉CSS重置的样式，看看是否真的有显著的不同？相信你就有了自己的答案了。

亿企邦点评：

我认为，CSS重置是个非常尴尬的概念，这是与性能，优化的概念是相悖的，但是，实际上，有时候它的存在似乎有一定的道理的，比如设置默认的a标签的属性，所以，至于用不用？怎么用？还是要看程序员个人的喜好来定了。