So, first of all — this is 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 about THE ORDER.

This battle is between ORDER and CHAOS. And between ORDER and,… another ORDER. In short — about a better way to sort CSS properties. No more, no less.

In short — there are 3 ways to do it:

don't do it. Write any CSS as you can. This is the most popular way
group properties by sense. Just put some stuff together. This is a quite popular way.
order all the properties alphabetically. The easiest, but less popular way.

From now let's forget about the first way. It's not the way.

2012

There was a good poll from css-tricks, and here are the results:

It's 2019 already, what was changed?

The difference between alpha sort, ABCSS as it known, and a grouping is quite sound, but it's better to make it clear

Initial state

Lets start with an ideal CHAOS from this prettier issue

.wrapper {
    top: 20px; /* is it absolute? fixed? You begin searching downwards */
    margin-left: 20px; /* Any other margins applied? */
    display: flex; /* How is this flexed?  searching for justify / align / flex rules */
    position: absolute; /* ah absolute */
    height: 100%;        /* and width? */
    margin-bottom: 20px;
    border-radius: 5px;  /* Is there even a border? */
    color: red;
    justify-content: center;
    margin-left: 2px;
    left: 0px;
    width: 100%;        /* and height? */
    border: 1px solid red;
}

Beautiful? That's how common CSS looks like after a few years without any control.

ABCSS

Sort it alphabetically

.wrapper {
    border: 1px solid red;
    border-radius: 5px;
    color: red;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-left: 2px;   /* ouch? */
    position: absolute;
    top: 20px;
    width: 100%;
}

It just helped notice that we had two margin-lefts. It would be easier to add a new property next time, especially if all the sorting is done automatically on stylelint level.

The main advantage of alphabetical sorting — easy property location. You are just scanning table, like a glossary, and yep, here is the property I am looking for.

The main disadvantage — height goes before width, left goes before top and there is some distance between them. Alphabetical sorting is mixing context.

I've used some online tool to make it. The vast amount of online tools, plugins for IDEs and CLI tools support alpha sort out of the box. — easy to use.

Groups

Sort it in groups

.wrapper{
    position: absolute;
    top: 20px;
    left: 0;

    display: flex;
    justify-content: center;

    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-left: 2px;

    color: red;

    border: 1px solid red;
    border-radius: 5px; 
}

This time it's more about separation of concerns — all properties are grouped(clustered) into buckets by a sense. The ordering principle is known as "Outside-in"

Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color, background, border, box-shadow)
Typography Properties (font-size, font-family, text-align, text-transform)
Misc Properties (cursor, overflow, z-index)

And the problem — there is more than one standard around it. To be more concrete — more than five. And that's a problem. Or not?

And, yet again — sorting is done by a tool, CSSCOMB this time.

The main advantage — all properties are grouped by common sense. All flex properties — together. All position, left, right, top, bottom — together.

If you need to add something — add somewhere and let a tool do the job.
If you need to find something — look for a group, then look inside a group. By the way — this is WAY faster than a linear search in a previous case.

This requires some clarification:

with alpha sort — you are looking for a beginning of the line, pointing beginning and the end of "your" first letter. Then you are going thought this subblock and that's done. That's basically O(n). After some training — O(n/2), as long you will know "where" look for a prop.

with group sort — you know "where" to look for a prop — groups have a constant position, and then go through small subset, and that's done. That's basically — O(3), not "n".

The main disadvantage — you have to learn how to separate conserns. 99% respondents said that this is a big problem — to write grouped CSS, but it's a tool job, not yours. And, yeah, there is a more than one standard, but it's not a problem with then ordering is done by a tool.

The Poll

So, I did some research around this problem.

2012y, css-tricks reported 45% devs uses groups, 14 — alpha sort, 39 dont use anything
poll created today (and not yet finished) — 50% for groups, 25% for alpha, 25% dont use anything

Best reasons to use groups:

Groups is the most natural way of putting things together: that’s the way your write them. Imagine if you’d have to write words in a sentence in the alphabetical order. Top, right, bottom, left naturally belong together, just right after position: absolute (twitter).
A good reason for groups could be atomic CSS — atom/utility are usually bound to a one "group", it’s a natural way to for functional frameworks. So “normal” CSS might look like combined atoms — ie grouped(twitter).
Smaller teams may prefer to cluster related properties (e.g. positioning and box-model) together idiomatic-css.
There are pros and cons for both ways. On one hand, alphabetical order is universal (at least for languages using the latin alphabet) so there is no argument about sorting one property before another. However, it seems extremely weird to me to see properties such as bottom and top not right next to each other. Why should animations appear before the display type? There are a lot of oddities with alphabetical ordering. On the other hand, ordering properties by type makes perfect sense. Every font-related declarations are gathered, top and bottom are reunited and reading a ruleset kind of feels like reading a short story. SASS guide.
group sorted files are smaller by 2% after gzip. Magic. This article introduces 5 different ways to order css props. study

Some reasons not to use

"Groups" is great if it means the same thing to everyone. It usually doesn't. You could probably automate enforcement of groupings and then you're square.twitter
Larger teams may prefer the simplicity and ease-of-maintenance that comes with alphabetical ordering. again idiomatic-css

Reasons to use alphabetical:

I used to do by "group" but it's too subjective. Plus there are plenty of addons to alpha sort a set of lines. Also Chrome Dev tools computed style is alpha.
alphabetically. anything else means anyone coming onto the project also needs to learn your pattern.
my own company is using alpha sort (that was a surprise for me).
google css guide recommends ABCSS, without explanation.

So, TLDR

most of us (and me usually included) are not giving a shit about ordering of CSS props. Most of us also not giving a shit about CSS itself.
CSS-in-JS also not quite encourage best practices.
Best practices like atomic CSS are besties with groups (by design), while BEM, unfortunately, has nothing about property ordering :(

It's actually a bit unexpected, that such opinionated thing is not well established and defined, and I have to write this article.

Fun fact — groups and alphabetical order could be besties, for example to lint your module imports, like eslint-plugin-import
There are groups first, and alphabetical ordering is used only inside one group.

Style lint for groups: https://github.com/constverum/stylelint-config-rational-order (or csscomb)
Style lint for alpha sort: https://github.com/hudochenkov/stylelint-order

So far I heard quite reasonable arguments pro grouping, but not a single (reasonable for me) pro alpha sort.

See also:

(about all variants) https://mediatemple.net/blog/tips/different-logical-ways-group-css-properties/
(about groups) https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685
(about abcss) https://medium.com/@jerrylowm/alphabetize-your-css-properties-for-crying-out-loud-780eb1852153

PICK YOUR SIDE, and explain your position. I've got some popcorn to share.

Happy Potter and the Order of CSS

Your account

Sections

Information

Services