在前端开发中，CSS 是布局和样式的核心语言之一。但是，CSS 代码的编写风格会影响代码质量、可读性和可维护性。因此，使用 linter 工具来规范 CSS 编写风格是非常必要的。
其中，stylelint 是 CSS linter 工具之一，它允许开发者定义自己的规则集合，并检查 CSS 代码是否符合规则。在这里，我们将重点介绍 stylelint 的一个插件：stylelint-declaration-block-order。
安装和配置
首先，我们需要在项目中安装 stylelint 和 stylelint-declaration-block-order：
npm install --save-dev stylelint stylelint-declaration-block-order
然后，在项目根目录下创建 .stylelintrc.json 文件，并添加以下内容：
{
"plugins": [
"stylelint-declaration-block-order"
],
"rules": {
"plugin/declaration-block-order": true
}
}这里，我们声明了使用了 stylelint-declaration-block-order 插件，并启用了其提供的规则。
规则说明
stylelint-declaration-block-order 提供了一个规则 declaration-block-order，它可以检查 CSS 声明块中属性的顺序是否符合定义的规则集合。
配置选项
declaration-block-order 规则支持以下配置选项：
order: 定义 CSS 属性的排序规则。unspecified-fallback: 如果声明块中存在无关紧要的属性，可以通过该配置选项定义这些属性的排序方式。
排序规则
order 配置选项用于定义 CSS 属性的排列顺序。它是一个数组，其中包含多个对象，每个对象表示一个 CSS 属性组。
以下是一些常见的 CSS 属性组及其对应的配置：
-- -------------------- ---- -------
-
-------- -
-------------------
--------------------
-----------
---------------
-
------- ----------
------- -------
--
-
------- ----------
------- ----------
--
-
------- ----------
------- ---------
--
-------
-
-其中，“dollar-variables” 表示以 $ 开头的 Sass 变量；“custom-properties” 表示自定义属性；“at-rules” 表示所有 At-Rule；“declarations” 表示普通属性；“rules” 表示嵌套规则。
处理未定义属性
在样式表中，有时我们会写入一些没有被任何规则集合覆盖到的属性。这些属性称为未定义属性。如果您不希望因为未定义属性而破坏 CSS 属性的排序，可以使用 unspecified-fallback 配置选项来设置未定义属性的排序方式。
以下是 unspecified-fallback 配置选项的一些常见设置：
"bottomAlphabetical": 将所有未定义属性置于声明块的末尾，并按字母顺序排序。"topAlphabetical": 将所有未定义属性置于声明块的开头，并按字母顺序排序。"bottom": 将所有未定义属性置于声明块的末尾。"top": 将所有未定义属性置于声明块的开头。
示例代码
-- -------------------- ---- ------- -- --- -- ---- - -------- ------ ---------- ----- ------ ---- - -- ---- -- ---- - -------- ------ ------ ---- ---------- ----- -
在上面的示例中，我们使用了 declaration-block-order 规则来检查 CSS 代码是否符合规范，并通过调整属性的顺序来使其符合规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56517