在前端开发中，掌握一套统一的样式规范是非常重要的。特别是在不同浏览器和设备下，页面的样式表现可能会出现差异性。为了避免这些差异性，开发者通常需要引入一些样式库或者手写一些 reset 样式表。
本文将介绍两种常见的样式规范库：normalize.css 和 CSS Reset，并结合示例代码分析其优劣和适用场景。
什么是 normalize.css ？
normalize.css 是一款非常流行且完善的CSS规范库，它的主要作用是为不同浏览器提供一套规范的默认样式，从而使浏览器的默认样式保持一致。同时，normalize.css 也可修复一些浏览器兼容性问题。normalize.css 包含了大量通用的样式规则，如重置字体大小、取消表单元素默认的外观和间距、统一样式等。开发者可以将 normalize.css 引入到项目中，以确保浏览器的默认样式一致性。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------- ------------
----- ---------------- --------------------------------------------------------------------------------
-------
-- ------ --
--------
-------
------
---- ------ ---
-------
-------什么是 CSS Reset？
CSS Reset 也是一种常用的样式规范库，与 normalize.css 不同的是，CSS Reset 是将 stylesheets 风格从浏览器的默认样式中完全移除，先“清空”浏览器的默认样式，然后自己定义一套样式规范。
由于 CSS Reset 完全重置了样式，所以开发者需要手写大量的样式规则，以实现和统一自己的样式需求。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- ------------
----- ---------------- ---------------------
-------
-- ------ --
--------
-------
------
---- ------ ---
-------
-------演进之路
虽然两种样式规范库都有自己的优点和适用场景，但是在实际项目中如何选择更加合适的样式规范库，让我们看看下面这个具体的演进之路，从而可以更加清楚地选择较为适合的库。
- 第一步：不使用样式规范库
如果你的项目样式很少，可以尝试直接在头部使用 reser CSS 的方式进行样式控制。或者更简单的方法，直接书写你需要的样式即可。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ----- ------------
-------
---- -
----------------- --------
------- --
-------- --
------------ ------ -----------
---------- -----
------ -----
-
-- ------ --
--------
-------
------
---- ------ ---
-------
-------- 第二步：使用 normalize.css
随着项目逐渐扩大，可能会遇到一些浏览器兼容性的问题，或者需要对表单元素等进行样式统一。此时，可以选择引入 normalize.css，以确保浏览器的默认样式一致性：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------- ------------
----- ---------------- --------------------------------------------------------------------------------
-------
-- ------ --
--------
-------
------
---- ------ ---
-------
-------- 第三步：使用自定义样式规范库
当页面需要更加严格的样式控制时，可以选择使用自定义的样式规范库。通常，自定义样式规范库会修改浏览器的默认样式，使它们更加符合自己的项目需求。例如，如果你喜欢使用统一的字体和边距进行布局控制，并采用 BEM (Block Element Modifier) 的方式对样式进行组织。那么可以采用下面的代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- --- ------ --- ------------
----- ---------------- ---------------------
----- ---------------- ---------------------
-------
------
---- ------------------
------- ---------------
--- -------------------------- ----------
---- --------------------
--- ---------------------
--- ----------------------- ----------------------
--- ----------------------- -----------------------
--- ----------------------- --------------------------
--- ----------------------- ----------------------
--- ----------------------- -------------------------
-----
------
---------
-------- ----------------
--- ------------------------------ ----------
-- ----------------------------- --------
----------
------- ---------------
-- --------------------------- --------
---------
------
-------
-------总结
在实际项目中，我们需要综合考虑自己的项目需求、开发时间和可维护性，从而进行样式规范库的选择。
当项目刚刚开始，样式较少时，可以直接书写样式规则，因为这样可以保证较少的代码量和较快的开发速度。当项目逐渐扩大时，我们可以引入 normalize.css 来统一处理浏览器默认样式。如果需要更加严格的样式控制，可以选择使用自定义的样式规范库，但是需要考虑可维护性和开发成本。
最后，需要注意的是样式规范库只是一种辅助手段，我们也需要不断的学习并锻炼自己的这方面的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a77e9148841e98943ff6dd