To make sure everyone uses the same order in CSS, we've created a logical order which everyone agreed with.
All properties are separated by type and grouped by related properties.
There is also a stylelint plugin to enforce this order and give errors when the erros arent set. Read more about this.
To use the order and get checked on it. You can add stylelint to your project. This enforces the order.
npm install stylelint stylelint-order stylelint-logical-orderAdd the settings to your package.json
{
"stylelint": {
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"if",
"for",
"else",
"each",
"mixin",
"extend",
"include",
"content",
"at-root",
"function"
]
}
],
"order/order": [
"custom-properties",
"dollar-variables",
"declarations",
"rules"
]
},
"extends": ["stylelint-logical-order"]
}
}OR create a .stylelintrc.json file
{
"plugins": ["stylelint-order"],
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"if",
"for",
"else",
"each",
"mixin",
"extend",
"include",
"content",
"at-root",
"function"
]
}
],
"order/order": [
"custom-properties",
"dollar-variables",
"declarations",
"rules"
]
},
"extends": ["stylelint-logical-order"]
}And add stylelint to your scripts:
{
"scripts": {
"stylelint": "stylelint 'src/scss/**/*.scss'",
"stylelint:fix": "stylelint 'src/scss/**/*.scss' --fix"
}
}Or when you use it with Vue files;
{
"scripts": {
"stylelint": "stylelint '**/*.vue' '**/*.scss'",
"stylelint:fix": "stylelint '**/*.vue' '**/*.scss' --fix"
}
}