CSS Reset 作为前端开发中常用的一种技巧，在开发者中间备受争议。对于一些开发者而言，CSS Reset 能够帮助标准化网页样式，避免出现不同浏览器渲染不同的情况；而对于一些开发者来说，它并不是必要的，甚至可能会对开发带来一些不必要的麻烦。
那么，我们本文就来探讨一下 CSS Reset 到底要不要用的问题。
什么是 CSS Reset？
CSS Reset 是一种用于重新定义浏览器默认样式的技巧。默认情况下，不同浏览器会对同一 HTML 元素渲染出不同的效果，这会给开发带来很大的麻烦。CSS Reset 的目的就是通过重新定义样式，让所有浏览器都能够呈现出一样的效果。
在 CSS Reset 中，我们通常会通过一些通用的样式，比如说：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- ------------ ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
将元素的外边距（margin），内边距（padding），边框（border），以及其他样式属性都设成了初始值。
CSS Reset 的优劣
CSS Reset 能够保证网站在不同浏览器下的一致性，这对于开发者来说是非常重要的一点优点。如果你在开发网站时使用了大量的浏览器特定样式，那么网站在不同的浏览器下可能看起来完全不同，这显然不是我们所期望的。
然而，CSS Reset 的缺点也比较明显。在使用 CSS Reset 时，需要格外小心，因为它可能会把原本有效的样式都覆盖掉。比如说，如果一个 HTML 元素本来有一个默认的外边距，CSS Reset 中的样式会把这个外边距设置为 0。
此外，CSS Reset 需要编写大量的代码，使得整个样式表看起来非常臃肿，而且代码量也会影响网站的性能。
另外一种缩小代码体积的方式来达到给低端设备上提高页面渲染速度(和其他性能考量)，是使用 minify 工具。这种工具会去掉源代码中的注释、空白、制表符等等，来压缩样式代码。比如说，下面这个 CSS Reset，经过 minify 之后，代码变成了这样：
-- -------------------- ---- ------- ---------------------------------------- ----------------------------------- ------------------------------------- ------------------------------------- --------------------------------------- ----------------------------------------- --------------------------------------- -------------- ----------------------------- ------------------------------------------------- ------------------------
CSS Reset 的最佳实践
虽然 CSS Reset 存在上述缺点，但其在避免浏览器默认样式差异方面的效果还是非常好的。对于需要使用 CSS Reset 的开发者，这里有几个实践建议：
熟悉具体代码：使用一些通用的 CSS Reset 代码时，很可能会把一些本来有效的样式都覆盖掉。因此，在使用 CSS Reset 时，你需要熟悉起代码的每一行代码，并确保你要重置的样式不会被忽略。
不要过度使用：CSS Reset 的代码量很大，因此，过度使用会影响到网站的性能。因此，在使用 CSS Reset 时，应该仅仅把相关的样式进行重置，并避免对所有元素都进行样式的重置。
配合使用 Normalize.css：Normalize.css 是一个轻量级的 CSS Reset 库，它能够保证网站在不同浏览器下呈现的效果基本一致。同时，它并不会像一些 CSS Reset 代码那样去掉所有的样式，而是在原来的基础上进行调整。如果你需要使用 CSS Reset，那么建议可以采用 Normalize.css 进行代替。
结论
CSS Reset 作为一种常见的技巧，确实存在一些优缺点。在使用 CSS Reset 时，你需要熟悉具体代码，不要过度使用，并且建议可以采用相对轻量级的 Normalize.css 进行代替。
最重要的是，你需要根据具体情况来决定是否需要使用 CSS Reset。对于一些需要严格控制样式的网站，或者需要保证在不同浏览器下呈现效果一致的场景，使用 CSS Reset 是非常必要的；而对于一些不太需要控制样式的网站，或者只需要在一两种浏览器下呈现的场景，CSS Reset 可能并不是必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efa1096fbf960197303d61