Some notes/thoughts in response to https://blog.jim-nielsen.com/2022/ordering-css-delcarations/

Sorting your CSS property declarations is fine, and tools such as StyleLint [1] have plugins [2] to make adhering to this goal a lot easier. If you're already pre-processing (or post-processing) then it should be easy to add StyleLint to your workflow.

In my opinion, Sass mixin includes should come after the other CSS properties in a declaration block. If you're overriding the styles in a mixin, your mixin could probably do with some more parameters, or the use of the content block [3].

Vendor prefixed properties should come before the unprefixed property (-moz-foo, -webkit-foo, foo), grouped together (-moz-foo, -moz-bar, -moz-baz, -webkit-foo, -webkit-bar, -webkit-baz, foo, bar, bar). Keep the prefixed/unprefixed properties together to reduce the cognitive load for whoever comes back to this codebase later. The unprefixed property should always come last because that will be applied if the browser supports it (even if the prefixed syntax was already applied) [4].

Alternatively, you could use Autoprefixer [5] and never have to write out all of the prefixed properties ever again 🤷

Anyway, tooling helps. Modern browsers are smart. You'll rarely hit any of the fun things we used to have to deal with when IE was a dominant browser. You shouldn't need to spend too much time thinking about cosmetic changes to your code. Besides the CSS cascade [6] (declaration order, specificity, etc.) everything else is irrelevant.

[1] https://stylelint.io [2] https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-alphabetical-order/READM... [3] https://sass-lang.com/documentation/at-rules/mixin#passing-arguments-to-content-blocks [4] https://css-tricks.com/ordering-css3-properties/ [5] https://github.com/postcss/autoprefixer [6] https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade