Stylelint 嵌套声明顺序数组

Question

在stylelint is it possible to nest arrays for the rule declaration-block-properties-order? I'm curious because I'd really like to have it enforce a declaration order similar to 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。我希望组织这两个组，但不关心填充或边距组是第一个。

Answer 1

In stylelint is it possible to nest arrays for the rule declaration-block-properties-order?

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

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

我推荐后一种选择，因为您的属性顺序越具体，团队成员就越容易知道在哪里查看是否在声明块中使用了属性。

Stylelint 嵌套声明顺序数组

Stylelint Nesting Declaration Order Arrays

css

arrays

stylelint