前言：在前端开发中，CSS 是一个很重要的部分。但是，由于浏览器厂商对于渲染效果的不同实现和默认样式，会导致展示效果出现巨大差异，有时甚至令人崩溃。而 CSS Reset 旨在规范化浏览器默认样式，避免不同浏览器之间的样式差异，让前端开发人员不必担心样式的不可控性。
一、什么是 CSS Reset？
CSS Reset 就是一种规范样式的技术，旨在消除浏览器默认的样式差异。由于浏览器对于样式的默认实现可能不同，使用 CSS Reset 可以将默认样式全部清除掉，使用重新定义的样式取而代之，规范所有浏览器的样式标准。
二、为什么要使用 CSS Reset？
- 清除浏览器差异：在不同的浏览器上，相同的HTML元素有不同的默认样式，使用CSS Reset 可以使得页面样式更一致。
2.减少重复代码：CSS Reset可以避免前端工程师在开发过程中重复编写相同的样式代码，大大提高了开发效率。
- 可维护性：CSS Reset 将所有默认样式清除掉，使得所有样式都重新定义。这样做好处是，只需要维护一套自己的样式代码，方便以后的修改和维护。
三、如何编写可重用的 CSS 代码？
对于一些经常重复出现的 CSS 样式，可以提取出来，通过新建一个 CSS 类的方式，让代码变得更加简洁，易于维护。这种样式类可以被多个元素复用，例如“hidden”这种隐藏元素的样式，可以在多个元素中复用。
以“hidden”这种样式为例，定义以下样式：
.hidden {
display: none;
}在 HTML 中，只需要添加这个 CSS 类名，就能随时调用。
<div class="hidden">This div is hidden!</div>
四、示例代码
下面是一个简单的 CSS Reset 的示例代码，清除了大部分浏览器的默认样式：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
五、总结
通过精通 CSS Reset 和编写可重用 CSS 代码，可以使得前端开发人员更加专注于页面设计和功能实现，使得代码更加优雅简洁。同时，这也是提高开发效率和代码可维护性的一种有效方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e48ca95b1f8cacd5f2891