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...
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.
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?
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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.
An advantage of groups - easy to find all the props about position or display. Usually, you need all them together to "understand" how style works
An advantage of an alpha sort - easy to find a single property, and you often looking for a single prop, but almost impossible to find all you are looking for, and it's also happens quite often.
I 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.
Nicolas is a co-founder at Clever Age. Drawing on over 20 years of experience, he advocates a pragmatic use of Web technologies, defining and applying good technical and methodological practices.
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:
locality - keeping similar things together
separation of concerns - splitting one big problem(hard to load into your brain) into smaller ones. This is alpha and omega for almost any CS problem.
Just think about CSS from a "JS" prospective. What do we do to keep our code manageable - we do fight Cyclomatic complexity, and KISS.
Alpha sorting is making it even worse. Are you sorting your functions? CSS selectors? Alpha sorting is breaking coherence and locality,
Group sorting is not a solution for the problem - it's still a WALL OF TEXT.
Grouping (just add a blank line between groups) - magically - do the job.
I know this article is ancient, but I have to point out that you could have named it "Harry Potter and the Order of the PhoeniCSS". We can never get that opportunity back....
We're a place where coders share, stay up-to-date and grow their careers.
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.
I know this article is ancient, but I have to point out that you could have named it "Harry Potter and the Order of the PhoeniCSS". We can never get that opportunity back....