Ordering CSS Properties A-Z

How do you order your CSS properties? There are a few different possible ways that spring to mind:

  1. Sort all properties alphabetically, listing them A-Z
  2. Group properties by their meanings, e.g. typographical properties first, then sizing, then shadows, then animations, etc.
  3. Random – just added as they occur to the developer.

I started off with them just logged randomly. Then, as I started writing longer style rules, I tried to bring similar items together. Gradually, over a long time, I’ve realised that the point of this grouping was to make the properties easier to find quickly. These days I always list them A-Z.

Going A-Z

At first it seems a bit obsessive-compulsive to order them in this way but it does make a real difference. I think things probably changed for me when I started working with JavaScript objects and JSON and the browser dev tools naturally ordered the object properties alphabetically. I got used to them being listed this way and learnt to scan these lists in a logical way. With CSS I’m convinced that in a list of 10 or more properties that being able to scan them in order and focus on the makes a huge difference when doing it every few minutes.

CSS Property Naming

Using A-Z ordering has made me realise how much of an opportunity has been missed with the property naming. For example, ‘border-top-right-radius’ would have been so much better as ‘border-radius-top-right’ as it would keep all of the ‘border-radius’ properties together in an alphabetical list. Also, some typographical properties being prefixed with ‘font-‘ and others ‘text-‘ means that they don’t get naturally grouped and ‘color’ seems stranded out on its own. Hopefully, some future incarnation of CSS will allow some aliasing of property names.

Code Editor Property Sorting

I use different code editors for different projects but my main day-to-day one is Visual Studio. The ReSharper tool, a paid extension, offers some code clean-up options, one of which is to order all CSS properties A-Z. This enables me to go back to code I worked on pre-A-Z and quickly kick it into shape in a couple of clicks. I don’t know of any other tools that do this but I’m sure they must exist, my guess would be as extensions/plugins rather than a core feature.

My Software Preferences

I just bought a new laptop and have spent a couple of long evenings setting it up. After babysitting it through the initial tedium of installing, connecting, updating, registering – lots of watching progress bars and restarting the machine every few minutes, I realised that I have my own strong ideas about which software I’m going to use for various tasks.

AVG FreeSecurity
Top of the priority list is security and getting some good anti-virus, anti-spyware software in place. I uninstalled the McAfee 30 day trial. I’m sure it’s excellent but why pay a subscription fee when there are free alternatives. I downloaded and installed AVG Free Version, which is free for home use. It performs scans and updates itself automatically keeping your PC safe.

Mozilla FirefoxWeb Browsing
Windows Vista comes with Microsoft Internet Explorer (IE) installed but personally I find that Mozilla Firefox offers a much better web browsing experience. It’s noticeably faster and the add-ons available mean that you can really customise it for your own needs. My personal favourites are Adblock Plus, which collapses known ads in web pages and, of course, Web Developer, which provides all sorts of options and extra information about the web page you are browsing.

OpenOffice.orgOffice – Word Processing, Spreadsheets, Presentations
I boldly decided to ignore the 30 day free trials of Microsoft Office (Word, Excel, PowerPoint) and instead downloaded and installed OpenOffice. It’s open source which means the code behind the software is freely available for software developers to tinker with and suggest improvements. OpenOffice is a suite of applications made up of Writer (word processing), Calc (spreadsheets), Impress (presentations/slideshows), Draw (graphics) and Base (databases). It’s fully compatible with Microsoft Office so you will always be able to open and edit anything you receive.

Web Development
From my software choices so far it may sound like I’m anti-Microsoft but I’m really not. I’m just a big fan of open source software and the open collaboration. For my web development work I do love Microsoft Visual Studio. There’s a lighter version of it called Visual Web Developer which is free to download and use. This makes it easy, well, easier, to create dynamic database driven web applications.

Open SourceIn summary, there is a lot of free and open source software available and it’s worth looking at your options rather than just going with the big names. Like me you might actually prefer some of the free software over the licensed and for the home user it could save you quite a bit of cash.