前言
当我们在开发前端页面时，我们的 CSS 代码可能非常冗长，包含大量的属性和样式。为了让代码更加易读和易于维护，我们需要按照一定的规范和顺序对 CSS 属性进行排序。在本文中，我们将介绍一款非常实用的 npm 包——css-properties-sorting，用于帮助我们自动按照规范对 CSS 属性进行排序。
安装
css-properties-sorting 可以通过 npm 安装，只需在终端中输入以下命令：
npm install --save-dev css-properties-sorting
安装成功后，我们需要在项目的 package.json 文件中添加以下内容：
{
"scripts": {
"sort:css": "css-properties-sorting -c ./css-sorting-config.json ./src/**/*.{css,scss,sass}"
}
}这个配置会告诉 npm，在运行 npm run sort:css 命令时，使用 css-properties-sorting 对代码进行排版。
配置
通过上述配置，我们已经可以使用 css-properties-sorting 对 CSS 属性进行排序了。然而，我们还需要定义一份排序规则，告诉 css-properties-sorting 应该如何排序。这可以通过创建配置文件来实现。
首先，我们需要在项目的根目录中创建一个 css-sorting-config.json 文件，并添加以下内容：
-- -------------------- ---- -------
-
-------- -
------------
------------ ------ -------- --------- ------- -----------
------------
--------- ----------
---------- -----------
---------- ------------- ---------
-------- --------
--------------
---------------
------------
---------------
------------ ----------
-------------- -------------- ----------
----------- --------------
-------------------
--------- ---------
------------
---------
---------- ---------
---------
-----------
-----------------
----------------------- -------------
---------- --------------
--------------- --------------
------------------- -------------- ---------------- -------------
------------ ------------------------ ----------------------
--------- ----------------- ------------ -------------- --------------
-------------- ---------------
------------------
---------------
-------------------------
---------------------
----------------------- ---------------------- ----------------------------- --------------------
------------------- -------------------
------------------
------------
--------------
-------------------
-------------------
----------------
-----------------
--------------------
-----------------
--------------- ----------------------
-----------
--------------------
----------------
------------
---------
----------------- ---------------------
----------------
-----------------
----------------
-----------------
--------------
--------------------- -------------------
---------------------
-----------------
-------------- -------------------
-----------------
-----------------
----------------
----------- --------------
---------------
--------------------
--------------------
--------------------
--------------------------
-
-在这里，我们使用的是一个默认的排序规则，可以根据自己的需要进行自定义。这个排序规则会自动将 CSS 属性分组，并按照一定的顺序排列。
使用
现在，我们已经准备好使用 css-properties-sorting 对代码进行排版了。例如，我们有以下的 CSS 代码：
-- -------------------- ---- -------
-- -
-------- ------
---------- -----
------------ ----
----------- -----
------------- -----
-------------- -----
------------ -----
----------- -------
---------------- -----
------------ --- --- --- ----------------
-然后，我们运行 npm run sort:css 命令，css-properties-sorting 就会自动对代码进行排序：
-- -------------------- ---- -------
-- -
-------- ------
----------- -------
---------- -----
------------ ----
----------- -----
------------- -----
-------------- -----
------------ -----
---------------- -----
------------ --- --- --- ----------------
-可以看到，CSS 属性已经按照一定的顺序排列，并且分为不同的组，易于阅读和维护。
小结
在本文中，我们介绍了一款非常实用的 npm 包——css-properties-sorting，它可以帮助我们自动按照规范对 CSS 属性进行排序。我们讲解了如何安装和配置 css-properties-sorting，以及如何使用它对 CSS 代码进行排版。希望本文能够对前端开发者有所帮助，提高项目的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005707181e8991b448e7e2d