Stylelint是否有规则要求CSS属性写在子类定义之前？

你需要的强制CSS属性声明优先于嵌套子规则的要求，可以通过stylelint-order插件的order/order规则实现。

1. 安装依赖 #

执行以下命令安装插件：

npm install stylelint-order --save-dev

2. 更新.stylelintrc配置 #

修改你的配置文件，新增插件引入和对应规则：

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations",
      "rules"
    ]
  }
}

规则说明 #

• custom-properties：自定义CSS变量排在最前
• declarations：普通CSS属性声明（如你示例中的border: 1px）排在第二位
• rules：嵌套的子选择器规则排在最后

配置生效后，你所描述的先写嵌套子选择器再写属性的写法会被判定为违规，执行Stylelint时加上--fix参数即可自动修正顺序。

内容的提问来源于stack exchange，提问作者X0r0N