什么是 CSS Reset？
在开始讨论 CSS Reset 是否必要前，先讲一下什么是 CSS Reset。简单来说，CSS Reset 就是一段 CSS 样式代码，它的主要作用是将页面中的所有默认样式清空，使各个浏览器在渲染页面时拥有同一套基础样式。
CSS Reset 的优点
CSS Reset 的优点是显而易见的，它帮助你在开始编写样式之前，先将浏览器默认样式清空，从而避免浏览器默认样式带来的不必要麻烦。有了 CSS Reset，你可以更方便地控制页面样式，提高页面的一致性和跨浏览器兼容性。
CSS Reset 的缺点
然而，CSS Reset 的缺点也是一样明显。如果你的网站或者应用只在特定浏览器或者特定环境下运行，CSS Reset 可能会是一种浪费资源的方式。此外，CSS Reset 本质上是一种全局性的修改，如果你没有完全掌握 CSS Reset 的规则，可能会出现一些未预料到的副作用。
如何看待 CSS Reset？
对于是否要使用 CSS Reset，不同的前端开发者有不同的看法。一些开发者认为 CSS Reset 是必要的，因为它可以避免浏览器默认样式带来的不必要麻烦，而且可以提高页面的一致性和跨浏览器兼容性。另一些开发者则认为 CSS Reset 没有必要，因为它可能会浪费资源，而且可能会引发一些未预料的问题。
那么，到底如何判断是否需要使用 CSS Reset 呢？这取决于你的具体业务场景和浏览器兼容性需求。如果你的网站或者应用需要适配多种浏览器和设备，那么使用 CSS Reset 可能会是一种明智的选择。如果你只需要适配特定的浏览器或者特定的环境，那么 CSS Reset 可能并不是必要的。
如何编写 CSS Reset？
如果你决定使用 CSS Reset，在编写代码的时候需要注意以下几点：
- 避免修改默认元素的属性，例如 h1、p、ul 等。
- 避免使用全局选择器（*）修改元素的默认属性，因为全局选择器会影响到整个页面。
- 要确保 CSS Reset 的样式不会与你的网站或者应用的样式产生冲突。
以下是一个简单的 CSS Reset 的示例代码：
// javascriptcn.com 代码示例
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,
figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}这段代码非常简单，它只是将页面中所有元素的默认样式清空，并将字体大小设置为浏览器默认大小。你也可以根据具体的需求编写更加复杂的 CSS Reset，但要记得避免过度修改默认元素的属性。
总结
CSS Reset 是一个有争议的话题，不同的前端开发者有不同的看法。通常情况下，如果你需要适配多种浏览器和设备，使用 CSS Reset 可能会是一种明智的选择。如果你只需要适配特定的浏览器或者特定的环境，那么 CSS Reset 可能并不是必要的。在编写 CSS Reset 的时候，要注意避免过度修改默认元素的属性，并确保 CSS Reset 的样式不会与你的网站或者应用的样式产生冲突。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6530a8b17d4982a6eb23add2