So, first of all - this is a not a common battle. It's not about CSS versus CSS-in-JS, not atomic CSS versus BEM, not LESS vs SASS. This battle is ...
For further actions, you may consider blocking this person and/or reporting abuse
It has to be alpha for me.
There is zero a learning curve for any new developers who come into the team who may not be 100% au fait with CSS, you don't have to worry about 1 rule overwriting another, plus it's the easiest thing in the world to remember.
With groups you'll have to remember what prop goes with what group, the order the groups go in, yea you could get a tool to do it but why complicate what is already probably a pretty complicated build process to spit out some HTML?
At this point not sorting at all would probably drive me a little bit crazy...
Not really sure I agree with this reasoning.
For starters, anyone coming in that is uncomfortable with CSS is going to be just as lost with alpha order or grouping. At least with the grouping by role/function, the CSS-shy dev will be forced to understand why certain rules in CSS absolutely must go together.
Why would they be lost with alpha order? Most people know the alphabet right?
Yep, this is a most popular alpha-pro opinion - the absence of a learning curve.
But what does alpha sort solves for you? I mean - everything should do something valuable, and what is valuable for you here - why not random sort?
It just keeps things neater whilst not having a big learning curve and I've gotten tripped up by the duplicated properties a few times in the past.
Yes, it probably would be faster not to bother but I've done it for so long I'm just a bit OCD about it at this point.
Definitely some variant of group sort. I've personally dealt with both, and my experience is that when I'm modifying CSS, I'm very often modifying a few related properties (top & left, width & height, margin & padding, font-family & color, etc etc etc). The constant jumping up and down through a stack of properties that ABCSS causes is an absolute nightmare. Grouped CSS saves so much time in the long run. If tools exist to do it for you on save, then it's zero extra work, and the consistent ordering of groups gets absorbed subconsciously after like two hours.
positionordisplay. Usually, you need all them together to "understand" how style worksI think groups are conceptually better but like you said, the draw back is that different groups mean different things to different people. If we could get a few consistent schools of thought on which properties to group together (for less obvious ones...), we could probably really get some best practices going. For now, alpha is probably the fastest way to establish some consistency with minimal draw back.
stylelint-semantic-groupsis great, thanks for that! 🙏Another strong ABCSS advocate is Jens Meiert: meiert.com/en/blog/on-declaration-... . He is AFaIK author of the original Google HTML & CSS guide.
Yet again, and quite unfortunately, I haven't found any "strong" opinions.
But I appended this article with a conclusion, where I did say - sorting is a poor man solution - it does not solves the main problem. ANY sorting does not the solving the problem.
What does:
Just think about CSS from a "JS" prospective. What do we do to keep our code manageable - we do fight Cyclomatic complexity, and KISS.