CSS declarations order

[jyggiz]

Hello everyone! Do we have any rules for how we write css properties inside selectors? I've heard about some practices where CSS properties are grouped according to some semantic criteria or just write properties in alphabetical order. Recently, it has become often everyone writes properties in different ways and it may be worth having some kind of uniform standard.

Does it make sense to add a similar rule for writing CSS inside a selector in a future CSS section?

[nswaldman]

Yes, and my vote goes out to alphabetical order. Ask ten developers what the correct golden standard for ordering your css declarations is and you'll get 8-10 different sorting orders in reply. Alphabetical order leaves little to discuss.

[nswaldman]

What really helps is to have stylelint do a final pass before commit so people can initially write CSS in any order that they're used to, yet still conform to alphabetical order.

[ReneDrie]

For me alphabetical would be horrible as it doesn't make any sense. Stuff that belongs together would be completely apart. But it's good to set up some ground rules indeed. Working with SCSS I personally always have the mixin @includes first. But after that I always have some grouping order

[nswaldman]

The @mixin location is discussed here, actually!

[ThaNarie]

I hope the only reason @nswaldman suggested alphabetical is:

• to reduced endless discussions
• because it can be easily done by tooling

However, if a linter/formatter can automate any ordering or you, IMHO there are better alternatives.

I can't imagine anyone actually preferring alphabetical over anything else, so to me that looks more like a compromise where nobody is happy? :) Unless you feel that alphabetical makes it easier to find certain properties than an arbitrary grouping/sorting that you never get used to? (keep in mind, this is just for reading part)

So I'd rather pick something that has at least some logical grouping (width and height together, font-size and line-height together, etc... layout/positioning at the top, styling at the bottom), that most people prefer over alphabetical. As long as it correctly orders everything as soon as you hit Ctrl/Cmd+S, to make all code consistent.

/an opinion from a person that almost never writes CSS

[pigeonfresh]

Rekindling this topic. I have been reading quite some examples that had alphabetic sorting and I must say I wasn't really confused about the sort order. I often use computed styles in chrome inspect as well, which has them listed A-Z as well. I can understand from a writing perspective it makes sense to think of having related items written at the same time. But linters can handle the sorting. I would say it raises legibility of other peoples code (because different people have different logical orders).

[nswaldman]

In my experience new developers pick up the trait of parsing alphabetised ordering no worse than any other ordering system. (CSS has no logical ordering, everything is opinionated, etc.) There's no constant debate over what declaration should go where and linters help developers to get used to it. As compromises go, it's the least fickle one we could adopt.