当别人的 CSS Reset 不够用，你可以自己写
在前端开发中，使用 CSS Reset 已经是十分常见的做法。然而，有时候我们发现别人的 CSS Reset 并不能完全满足我们的需求。这时候，我们就需要自己动手写一份符合我们需求的 CSS Reset 了。
- 什么是 CSS Reset？
在使用 CSS 渲染页面时，浏览器默认会对各元素进行一些默认的样式渲染。而不同的浏览器对默认样式的处理也可能不尽相同，这就会导致在不同浏览器和系统下，同一个页面元素的展示效果可能不一致。
CSS Reset 就是一种针对这种问题的解决方案，它可以帮助我们将不同浏览器默认样式之间的差异进行规避，从而达到更加一致的渲染效果。
- 为什么会需要自己写 CSS Reset？
虽然市面上已经有大量的 CSS Reset 在使用，但是在实际场景下，我们还有可能会遇到以下问题：
- 部分 Reset 涉及的样式可能与我们自己的开发风格并不符合；
- 内置 Reset 没有包含我们需要的某些样式；
- 某些 Reset 可能已经过时或不够完整，或者有一些兼容性问题。
针对这些问题，我们就需要自己动手写一份自定义的 CSS Reset 来解决。
- 怎样写一份符合自己需求的 CSS Reset？
当我们需要自己动手写 CSS Reset 时，下面这些步骤可以帮助我们更好地完成这一过程。
3.1. 分析使用场景
在编写 CSS Reset 之前，首先我们要分析出自己所处的使用场景，以及页面中会出现的主要元素和布局，进而确定自己 CSS Reset 需要考虑哪些方面。
3.2. 熟悉 CSS 的基本语法和属性
在编写 CSS Reset 的过程中，我们需要使用到大量的 CSS 属性和规则。因此，在编写 CSS Reset 之前，必须要对 CSS 的基本语法和属性有一定的掌握。
3.3. 参考已有的 Reset
虽然自己写 Reset，但是完全从零开始可能并不是最好的方式。在编写过程中，我们可以参考一些已有的 Reset，从中了解到 CSS Reset 的一些实现方式、最佳实践以及一些注意事项。部分已有的 Reset 如 normalize.css、reset.css、base.css 等。
3.4. 编写 Reset 样式
在经过前面的准备后，我们开始进入 CSS Reset 的编写阶段了。首先，我们要针对使用场景，确定需要重置的 CSS 属性，并编写相应的 CSS 样式规则。比如，可以通过以下代码来重置页面的 margin 和 padding：
-- -------------------- ---- ------- ----- --- --- --- --- --- --- --- --- -- - ------- -- -------- -- -
3.5. 添加需要的样式
在编写 Reset 的基础上，通常还需要添加自定义的样式，包括字体样式、色彩样式、布局样式等。这些样式需要考虑到使用场景和设计规范，同时要注意与已有样式的兼容性。
- 总结
对于前端工程师来说，对于基础工具使用自如是非常重要的，自主思考和注重实际场景的表现也是一种非常有益的学习方式。当我们需要的 CSS Reset 无法满足需求时，自己编写 CSS Reset 也是一种重要技能。在编写中，需要充分考虑使用场景、编写 Reset 样式以及添加自定义样式的三个阶段，这样才能使 CSS Reset 对开发效率和渲染效果都有很好的贡献。
参考代码如下：
-- -------------------- ---- ------- -- ----- -- -- ---- - ------- -- -------- -- ---------- ----- ------------ ---- - --- --- --- --- --- -- - -------- -- ------- -- ------------ ------- - --- -- - ----------- ----- - -- -- - ----------- ------- - ----- - ---------------- --------- --------------- -- - --- - ------- - ----- --------------- ------- - -- ------- -- ---------- - ---------- ------- ------- - ----- -------- ----- ----------------- -------- ------ ----- ------------ ------- ---- ----- ------ ----------- ---------- ----- - -- - ---------- ----- ------------ ---- ------------ ----- -------------- ----- - - - ------ -------- ---------------- ----- - ------- - ---------------- ---------- -
这份代码包含了五个部分：
- Reset 样式（1-10 行）：重置了 body、h1、h2、h3、h4、h5、h6、ol、ul、i、em、table、img 等元素的默认样式。
- 添加自定义样式（12-24 行）：为 .container、h1、a 等元素添加了一些自定义的样式。
- 容器（11 行）：使用了 .container 类名的区域，设置了其最大宽度为 1000px，水平居中，上下内边距为 20px，背景色为 #f6f8fa，前景色为 #333，使用了 Source Sans Pro 字体，字号为 16px。
- 标题（13 行）：为 h1 元素设置了字体大小为 36px，行高为 1.3，加粗，下外边距为 20px。
- 链接（15-18 行）：为 a 元素设置了颜色为 #538ff7，去除了下划线样式，并在鼠标悬停时添加了下划线。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489594d48841e98947a2748