在前端开发中，CSS Reset（CSS重置）是一个常用的技术手段，用于统一浏览器在渲染网页时的默认样式。但是，由于不同团队、不同项目的特殊需求和差异，通用的 CSS Reset 可能并不完全符合你的需求。所以，如何制定属于自己的 CSS Reset 规范呢？接下来，我们将一起探讨这个问题。
一、需求分析
首先，我们需要对自己的项目需求进行分析，例如：
- 相对布局或绝对布局的默认样式
- 字体大小和行高的设置
- 文本对齐方式的设置
- 背景颜色和图片的缺省值
- 表格边框的样式和颜色，是否需要间隔行背景颜色
- 链接、按钮、输入框的默认样式
- ……
分析需求可以自然而然地引起思考，做CSS重置的目的是什么？我们想要统一不同浏览器的默认样式、避免不必要的浏览器差异，展现出让大家满意的外观效果。而为了实现这个目标需要经过以下步骤：
二、初始的 CSS Reset
了解了需求之后，我们可以开始编写初始的 CSS Reset。
-- -------------------- ---- ------- - - ------- -- -------- -- ----------- ----------- - --- -- - ----------- ----- - --- - ------- ----- ---------- ----- --------------- ------- - - - ---------------- ----- - ------ ------- --------- ------ - ---------- ----- ------- ----- -------- ----- -
这里列出了一个通用的 CSS Reset，其中称通配符选择器为全局选择器，并设置了一些通用的基础样式，包括：
- 所有元素的外边距和内边距都为0。
- 所有元素的
box-sizing值均设置为border-box，这是一种CSS盒子模型，元素的宽度和高度包括边框和内边距。 - 列表元素的默认样式。
- 图片元素默认没有边框，可以最大限度的填充父容器。
- 链接元素的默认样式。
- 表单元素的默认样式。
三、重置
完成了初始的 CSS Reset 之后，我们需要对每个元素进行彻底的分析和重置。在这个过程中，你可能需要参考每个元素的标准样式和浏览器实现，从而更好地实现自己的需求。
比如，如果你需要在表单元素中添加默认字体样式，你可以这样写：
input, button, select, textarea {
font-size: 14px;
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}又例如，如果你需要定制标题、段落、列表的样式，你可以这样写：
-- -------------------- ---- ------- --- --- -- - ------------ -------- ------- ---- -- - - - ---------- ----- ------------ ---- ------- ---- -- - --- -- - ------- ---- -- -------- -- - -- - ------- --- -- -
四、注释
为了方便后续的维护和修改，我们需要对 CSS Reset 中的每个重要部分进行注释。注释需要体现这一部分的作用和用途，比如这样：
-- -------------------- ---- ------- -- - ---- -- - - ------- -- -------- -- ----------- ----------- - -- - ---- -- --- --- --- --- --- -- - ------------ -------- ------- -- - ---
五、管理
将 CSS Reset 的样式统一写在一个文件中，通过引入同一 CSS 文件来管理。如果项目过大，可以再次拆分成更加细小的模块。
最好的、也是最简单的方式就是从 Github 上寻找大型的、优秀的 CSS Reset 库，然后根据自己的需求进行修改即可。
六、总结
通过以上步骤，我们就可以制定出属于自己的 CSS Reset 规范了。我们需要结合实际需求，进行初始重置，然后逐个元素进行完善。同时，我们也需要考虑注释和管理的问题，让自己和其他人更加容易地维护这份样式表，随时调整样式。这是一个既有深度又富有指导意义的问题，希望对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7df94f6b2d6eab30109af