web前端：重置还是不重置-这是个CSS问题

作者:RockUX 更新于： 2020-12-08 13:45:01

　　层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

　　摘要：你使用CSS重置吗？是最近养成或者丢掉的习惯吗？真的有用吗？请看本篇文章，为您解析。

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

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

　　EricMeyer的CSS重置方案是第一个也是被大家广泛使用的。HTML5doctor的HTML5ResetStylesheet也可以帮助设置一些新的元素。CSSReset.com还提供一些别的不错的方案和文档。

　　应该使用CSS重置吗？

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

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

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

　　浏览器的兼容性问题可以降到最小

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

　　*{padding:0;margin:0;}

　　这样的写法会影响到所有的标签，有的开发者会告诉你这会让CSS的渲染效率变低。但是我还没遇到过这样的问题。

　　我对CSS重置的主要疑问在于：

　　增加页面的大小

　　大多数CSS重置文件都在2kb左右（未压缩）。听着不大，但是如果我的CSS总共才10kb，那么这就不是个小数字了。

　　额外的影响

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

　　不同的浏览器渲染页面也不同

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

　　个人以为，我不在乎Firefox下面的标题比IE下面的大2px，或者Opera的bold属性比Chrome的更加好看，实际上，CSS重置也解决不了这个问题。

　　不否认对浏览器的测试

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

　　跟我的工作习惯不同

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

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

　　并不节省时间

　　CSS重置真的节省了你的开发时间？

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

　　做一个测试，从你的网站里面去掉CSS重置的样式，看看是否真的有显著的不同？

　　你使用CSS重置吗？是最近养成或者丢掉的习惯吗？真的有用吗？

　　CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。