What is the default CSS property order?

Question

i have been trying to find documentation on this but i havent been able to. I use stylint in a project and we have the css order option activated. I haven't been able to set up VS code to show the errors and i haven't found a page with the information to actually know the order,so i always need to check on compile time if i have any mistakes in the CSS order properties, and it shows a huge error on screen.

this are the stylelint rules we have

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']
            }
        ]
    }
}

I dont see anything weird about it. It there a page where i can find the correct order? it is so annoying because when i get a stylelint order error, i usually have to find it in a few tries.

score 2 · Accepted Answer · answered Feb 24 '22 at 16:46

You are 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.

You can see Stylelint errors in VS Code using the official Stylelint extension.

And you can have the extension automatically fix problems on save, which will include the order of your properties, using the editor.codeActionsOnSave configuration property:

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

Alternatively, you can run npx stylelint "**/*.scss" --fix" on the command line to automatically fix problems.

What is the default CSS property order?

1 Answers1