默认的 CSS 属性顺序是什么？

Question

我一直在努力寻找这方面的文档，但一直找不到。我在一个项目中使用了 stylint，并且我们激活了 css 订单选项。我无法设置 VS 代码来显示错误，我还没有找到包含实际知道顺序的信息的页面，所以我总是需要检查编译时间，如果我在 CSS 订单属性，它在屏幕上显示了一个巨大的错误。

这是我们的 stylelint 规则

module.exports = {
    extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['mixin', 'if', 'else', 'include', 'extend']
            }
        ],
        'max-nesting-depth': 4,
        indentation: 4,
        // add your custom config here
        // https://stylelint.io/user-guide/configuration
        'selector-pseudo-element-no-unknown': [
            true,
            {
                ignorePseudoElements: ['v-deep']
            }
        ]
    }
}

我看不出有什么奇怪的。有一个页面可以让我找到正确的顺序吗？这太烦人了，因为当我收到 stylelint 订单错误时，我通常必须尝试几次才能找到它。

Answer 1

你是 extending the stylelint-config-concentric-order community config. This config includes and configures the stylelint-order community plugin. You can find the order of the properties in the repo on GitHub.

您可以使用 the official Stylelint extension 在 VS Code 中查看 Stylelint 错误。

并且您可以使用 editor.codeActionsOnSave 配置属性:

让扩展程序在保存时自动修复问题，这将包括您的属性的顺序

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "postcss","scss"],
  "css.validate": false,
  "scss.validate": false
}

或者，您可以运行 npx stylelint "**/*.scss" --fix" 在命令行上自动修复问题。

默认的 CSS 属性顺序是什么？

What is the default CSS property order?

lint

stylelint

linter

默认的 CSS 属性 顺序是什么？

What is the default CSS property order?

lint

stylelint

linter

默认的 CSS 属性顺序是什么？