Sorting out CSS

Note from 2020 me: This isn't so old, by my standards. And it was a piece from works blog, but I like it so I'm putting it here too. I don't do as much building as I once did ... but there are some thing that are worth saying. Sorting CSS alphabetically is one of them. And seriously kids, learn your HTML and CSS proper.

Anyone who writes code quickly learns what works for them and what feels comfortable. Habits form – good and bad. Very quickly, working on code written by someone else makes them feel dirty and triggers a deep-seated, anxiety-driven need to refactor every line.

This personal expression is fine in isolation, but in team situations where multiple developers are working on the same codebase, it’s ultimately going to cause conflict. Either in the virtual Git sense or in the physical realm of the office.

Brokering peace resolutions between warring countries is easier than getting a group of developers all agreeing on something very simple like, say, whether to indent using tabs or spaces.

In some respects, this article will be like shouting into the wind, but it’s nice to have goals. Plus, I’ve got a nice analogy I want to use.

So, sorting CSS

First some points.

• CSS is code.
• CSS is easy to write.
• CSS is very hard to write well.
• CSS is not broken
• I’ve been writing CSS for a period of time that is far too close to 20 years for my liking
• None of this matters

Now that’s out of the way, let’s talk about sorting.

There is no right way to order CSS properties inside a selector. One of the beauties of the CSS specification, is it’s fairly relaxed approach to such things. There are a few techniques that people tend to use, but it’s a personal preference thing. Most writers of CSS fall into one of four general methods.

Completely random.

You type the properties as they come into your head. When you make your first steps in writing CSS, this is probably how you will start. Some people never move on. That is fine.

.sort__random {
 z-index: 9;
 font-weight: bold;
 color: #faf;
 width: 100%;
 font-size: 99px;
 margin: 0;
 background-color: #f5f5f5;
 display: inline-block;
 height: 1.5em;
 padding: 20px;
 text-transform: uppercase;
 content: 'You get the idea';
}

Grouped by type.

A lot of people like to group similar properties together. Perhaps all the box model properties, then typography, layout and possibly phases of the moon. You then have to find a way to order the groups, so it can be doubly vague and left to personal interpretation. It’s also open to interpretation about which properties fall in to which groups. I’m sure you can work it out. Eventually.

.sort__grouped {

 display: inline-block;
 z-index: 9;

 height: 1.5em;
 padding: 20px;
 margin: 0;
 width: 100%;

 font-weight: bold;
 font-size: 99px;
 text-transform: uppercase;

 background-color: #f5f5f5;
 color: #faf;
 content: 'You get the idea';
}
 

By line length.

This is … a way of doing things. Apparently. It looks neat, I guess.

.sort__madness {
 margin: 0;
 z-index: 9;
 color: #faf;
 width: 100%;
 height: 1.5em;
 padding: 20px;
 font-size: 99px;
 font-weight: bold;
 display: inline-block;
 text-transform: uppercase;
 background-color: #f5f5f5;
 content: 'You get the idea';
}

Alphabetical

This gives you an extra step to think about. It feels very unnatural, at least initially. It has the advantage of being very unambiguous.

.sort__alpha {
 background-color: #f5f5f5;
 color: #faf; 
 content: 'You get the idea';
 display: inline-block;
 font-size: 99px;
 font-weight: bold;
 height: 1.5em;
 margin: 0;
 padding: 20px;
 text-transform: uppercase;
 width: 100%;
 z-index: 9; 
}

The analogy

To take it out of the coding realm, I’m going to look at another example of where sorting is important – organising a record collection. This is a completely different activity, but one that can be deeply personal and nuanced.

In the olden days, I used to DJ a bit. I had a few records (way before you kids got into your vinyls. I’m cool old like that).

When you have a lot of music, it’s important to have a system. Especially as a DJ because you need to find and access specific records very quickly.

Like with code, you have options when it comes to sorting out your music. Anyone who has read or seen High Fidelity will know the scene where Dick walks in on Rob (John Cusack) reorganising his music collection:

Dick: “What is this … chronological?”
Rob: “Nooo”
Dick: “Not … alphabetical …”
Rob: “Nope”
Dick: “What?”
Rob: “Autobiographical.”
Dick: “No. F***ing. Way.”
Rob: “I can tell you how I got from Deep Purple to Howling Wolf in just 25 moves”
Dick: “Oh man!”
Rob: “If I want to find the song ‘Landslide’ by Fleetwood Mac, I have to remember that I bought it for someone in the fall of 1983 pile, but didn’t give it to them for personal reasons.”
Dick: “That sounds …”
Rob: “Comforting”

I, personally, went for a loosely genre based ordering system. I’ve actually got an annotated image from 2006 of some of my records on the shelf. I was basically into dance music. The amount of genres and sub genres within that is terrifying. You can only do it loosely. The records are split into:

• Piano-y house anthems from the early to midish 90s.
• Early period 80s electronic, acid house, some late disco stuff
• Mid 90s house, mostly vocaly US stuff.
• Later 90s onwards ‘deep’ house.
• House that’s a bit tougher and dirtier than the other house (it matters!).
• Techno. Spanning many eras.
• Leftfield/hard to categorize stuff. Vol. 1.
• Leftfield/hard to categorize stuff. Vol. 2.
• Hip Hop. Vol. 1.
• Hip hop Vol. 2.
• Hardcore from 93-96 ish.
• Drum n Bass and Jungle.
• Charity shop gems.
• Compilation albums.
• 7 inchers.
• Charity shop dross (Golden Latin Brass etc).

Inside that, there are some further vague sorting around BPMs and ‘vibe’. You are swapping out records so quickly, it’s hard work to keep on top of slipping stuff into the exact place every time. Breaking stuff down into manageable chunks is enough to keep a lid on the madness.

It made perfect sense to me. 11 years later it still does.

It does not make sense to anyone else on the planet.

No one could easily come in and find 4 Hero’s cover of ‘Les Fleur’ without my help.

Similarly, if someone attempts to put a record back in the collection, but puts it in the wrong place … actually, let’s not think about …

And here we are at the point.

Self expression and personality in sorting out anything is fine, when it’s just for you.

When other people become involved, it quickly becomes unworkable. That is why record shops are genre based – but then very alphabetical. It’s why there is an international standard system for the categorisation of books in libraries.

Having code standards for the sorting of your CSS properties when working in teams is a very good idea. Everyone knows where they stand, new team members can walk in, see how everything works. Lovely.

I’m not here to tell you how to sort your team’s properties.

But I would suggest alphabetically.

Wait – come back.

I’ve been through the whole journey. I’ve done random, I’ve done grouping, but after being introduced to alphabetical by Dan Donald (and thinking he was mad) I have to say, it’s probably the best way.

Yes, there is some mental pain involved in remembering to do it and breaking old habits. It doesn’t come naturally, it requires more initial thought. But, as you get used to it, it quickly becomes far more normal than you’d expect.

Then, one day, you find yourself unnaturally agitated when you work with properties that aren’t alphabetical.

Sorting alphabetically is completely unambiguous and largely universal. You can even get your editor to do the sorting for you. It’s a very simple rule that everyone can understand. Yes, people think you are mad, but it helps. I promise.

I fully expect most people to ignore this advice, but it is a good idea for teams to come to some agreement on the best way to lay things out. Sorting anything in a personal way does not work outside of you. Systems help teams work better.

Right, now we’ve got properties sorted let’s talk about ordering all those selectors. Or commenting and documentation. Or something easy like tabs or spaces …