Stylelint 嵌套声明顺序数组答案

【问题标题】：Stylelint Nesting Declaration Order ArraysStylelint 嵌套声明顺序数组
【发布时间】：2023-04-06 07:48:02
【问题描述】：

在stylelint 中是否可以为规则declaration-block-properties-order 嵌套数组？我很好奇，因为我真的很想让它执行类似于Nicolas Gallagher's Idiomatic CSS 的声明命令。但是，我并不关心填充或边距是否在前。

我知道我可以通过这条规则轻松做到这一点...

"declaration-block-properties-order":
    [
      {
        properties: [
          "position",
          "top",
          "right",
          "bottom",
          "left",
          "z-index"
        ],
      },
      {
        order: "flexible",
        properties: [
          "padding",
          "margin"
        ],
      },
    ]

但是...我要做的是指定填充和边距组的顺序，因此边距、边距顶部、边距右、边距底部和边距左只能按此顺序排列，填充相同..但不在乎哪个组是第一个。我试过嵌套数组，但我不确定这是否可行或者我的语法错误。

"declaration-block-properties-order":
    [
       {
        order: "flexible",
        properties: [
          {
            properties: [
              "margin",
              "margin-top",
              "margin-right",
              "margin-bottom",
              "margin-left"
            ],
          },
          {
            properties: [
              "padding",
              "padding-top",
              "padding-right",
              "padding-bottom",
              "padding-left"
            ],
          },
        ],
      },
    ]

但我不希望它接受 margin、margin-top、padding、margin-right、padding-right。我希望将这两个组组织起来，但不关心填充组或边距组是第一个。

【问题讨论】：

标签： css arrays stylelint

【解决方案1】：

在 stylelint 中是否可以为规则声明-块-属性-顺序嵌套数组？

不，这是不可能的。你有两个选择：

Write a plugin 提供了这种灵活性。
要求您的 CSS 代码中边距必须位于填充之前，反之亦然。

我建议使用后一个选项，因为您的属性顺序越具体，团队成员就越容易知道在哪里查看某个属性是否正在声明块中使用。

【讨论】：