Ordering CSS for Everyone
The modern web is always changing, and this article is more than two years old.
By Scott O’Hara
I often find myself getting into discussions, or arguments disguised as discussions, about the preferred ordering methods for CSS properties.
Yeah. That’s how I party.
Anyway, it basically boils down to three different methods that you could follow:
- Random Ordering (because you hate yourself and others)
- Ordering via Property Groupings
- Alphabetically – aka ABCSS (my preferred method)
Why do I prefer the ABCSS method? (yes, I’m going to call it that. You’re welcome or I’m sorry, depending on how clever you find that name to be.)
Well, let’s first take a look at the pros and cons of each…
- No ordering system to learn.
- You barely have to think when writing properties this way.
- Future maintainability, you give zero F***s about it.
- If you charge by the hour, this will be quite profitable for you. As you’ll be setting yourself up for countless hours of revisiting your code and wondering what sort of drugs you were on when you first wrote it.
- If you really want to fight the other developers on your team, this will get you that much closer to your goal.
- See all the pros.
- Higher risk of duplicative declarations of properties.
- Your jumbled code in general.
- Your future self will probably build a time machine to come back in time an stab you in your face. People normally strive not to be stabbed in the face. Hopefully you can see the dilemma here.
Ordered by Property Groups
- Like properties are near each other.
- Forces new developers to learn what properties relate to each other.
- Lots of people use this method (or a form of it). In fact, it’s promoted in Nicolas Gallagher’s Idiomatic CSS
- People have written scripts to let you write your CSS how you want, and then reorder it to a grouped structure.
- You have to learn a system that can have variations to it, making it potentially different between teams / organizations.
- Since not all rule sets require all property groupings, extra documentation or comments may be needed. As without something to describe the grouping system, new developers may not immediately realize how properties are ordered.
- Stream of thought declaring requires reordering to adhere to the system.
- Many people still write their property declarations randomly within a larger property grouping, leading to possible duplicative declarations.
- While groupings of properties may become consistent, properties may still require longer scanning of a rule set to find, due to inconsistent placement within groupings and not all rule sets require all groupings.
Alphabetical Ordering – ABCSS
- If you know the alphabet, you know this ordering system. Low barrier to entry and easy to teach to others.
- Easy to see if a style sheet follows this ordering system or not. e.g. are the properties in alphabetical order? Yes? Then the style sheet uses ABCSS. Are they not in alphabetical order? No? Then you have to figure out what alternative system the style sheet is using, if any.
- Also promoted in Idiomatic CSS as an easier system to maintain on larger teams. Google also promotes the usage of ABCSS.
- Sublime Text auto alphabetizes selected properties by hitting F5 on a Mac, or F9 on a PC.
- You have to specifically NOT be paying attention to what you’re doing to write duplicative property declarations.
- Some dev tools, like FireBug, display CSS in alphabetical order when inspecting elements, making it easier to work in dev tools and copy updates back to your style sheet.
- Like property groupings: if you are writing by stream of thought, you’ll still need to break your workflow to re-order properties after you’ve finished writing declarations. You’d do this by either the method described above (Sublime reordering), or through a plug-in to auto reorder for you.
- You’ll have to write articles, or give explanations describing why this method is better than others.
I am sort of biased
OK, clearly some of my bullet points there are a little biased. But I guess that’s to be expected since I’m trying to promote the use of ABCSS over other systems.
However, I actually have used all three systems. Alphabetical ordering has been the only system I’ve found that has kept CSS maintainable across the teams I’ve worked on. In the end, my co-workers – or and those that have had rational discussions concerning CSS ordering (that actually tried it out ABCSS) – ended up coming to around to see the benefits of alphabetical ordering.
I find that when it really comes down to it, we’re really just debating personal preferences, and likely arguing on the Internet. And that rarely ends well for anyone.
So in closing
As a sole developer, you really have no reason to change whatever system you’re currently using. If it works for you, keep at it.
However, if you are going to be or are working on a team where everyone has come from different backgrounds, and each probably have their own customized ordering system to maintain their style sheets, it may be worth give ABCSS a try.
It may seem like arbitrary ordering at first, but if you let yourself get into a pattern of using it, you’ll come to appreciate that you never have to hunt for a property again.
This article was originally published at http://www.scottohara.me/article/abcss.html