Web 前端的开发中，CSS 样式编写是必不可少的一部分。为了让 CSS 的编写规范化、易于维护和扩展，在不同的项目中，我们可以采用不同的 CSS 规范，如 SMACSS（Scalable and Modular Architecture for CSS）规范等。在此基础上，出现了许多 npm 包来帮助我们规范化 CSS 代码，css-property-sort-order-smacss 就是其中之一。
安装 npm 包
我们可以用以下命令来安装 css-property-sort-order-smacss：
npm install css-property-sort-order-smacss
安装完成后，我们可以在项目的 package.json 文件中在 devDependencies 中看到该依赖。
使用方法
使用 css-property-sort-order-smacss 可以很方便地规范化 CSS 属性的顺序。如下是 css-property-sort-order-smacss 推荐的 CSS 属性排序顺序：
- Positioning
- Box Model
- Typographic
- Visual
在 CSS 代码中，需要遵循以上顺序，按顺序排列属性。使用 css-property-sort-order-smacss 可以自动帮助你将 CSS 属性按照正确的顺序排序，让代码更具可读性和易于维护。
使用前，我们需要在项目的 .stylelintrc 或者 .stylelintrc.js 中添加配置项：
-- -------------------- ---- -------
-
---------- -
-----------------
--
-------- -
-------------- -
-
-----------
------
--------
---------
-------
---------
--
-
----------
--------
--------
---------
---------
----------
---------
---------
--
-
-------
--------------
-------------
--------
--------------
-------------------
-------------------
--------------------
----------------------
------------------
----------
------------
--
-
-------------
-------------
------------
------------
-------------
-
--
------------------------- --------
-
-其中，order/order 表示各个属性排序最终应该按哪个顺序排序。order/properties-order 则表示使用 smacss 规范来排序。
添加配置后，在项目的 package.json 中添加对应的命令，如：
"sort:css": "stylelint \"**/*.css\" --fix"
运行该命令，可以自动将 CSS 属性按照 smacss 规范排序。
示例代码
-- -------------------- ---- ------- ---- - -------- ------------- ------- --- ----- ------ ------- ----- -------- ----- ----------------- -------- ---------- ----- ------------ ---- ------ ----- ----------- ------- ------------------- - - ---- ------- -- -- ----- ----------- - - ---- ------- -- -- ----- ------------------- --- ----- ----------- --- ----- ------------------ -------------- -- --- ---------- -------------- -- --- -
在使用 css-property-sort-order-smacss 包后，我们运行 sort:css 命令后，可以得到如下排序后的代码：
-- -------------------- ---- ------- ---- - -------- ------------- ------- ----- -------- ----- ------- --- ----- ------ ----------------- -------- ---------- ----- ------------ ---- ------ ----- ----------- ------- ------------------- - - ---- ------- -- -- ----- ----------- - - ---- ------- -- -- ----- ------------------- --- ----- ----------- --- ----- ------------------ -------------- -- --- ---------- -------------- -- --- -
如此排序后，我们可以看到 CSS 属性按照 SMACSS 规范被排序，让代码更加整齐、可读性更好。
总结
css-property-sort-order-smacss 帮助我们很方便地使用 SMACSS 规范来排序 CSS 属性，让我们的代码更容易维护和扩展。在使用前需要明确 SMACSS 规范中的属性排序顺序，然后按照示例代码添加 .stylelintrc 配置，这样即可在项目中快速使用 css-property-sort-order-smacss 对 CSS 属性进行排序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f100326403f2923b035c218