css organisation: alphabetising style properties
I started off alphabetising my style properties very early in my web development career. CSS1 was still relatively new so we were all still using the font tag and spacer images inside nested tables.
My main reason for this wasn’t the orderly, easy to find, easy to read and difficult to duplicate the same property in the same rule structure that was to ensue. It was purely because of a slight obsessive compulsive tendency for neatness.
Nicole Sullivan wrote an excellent CSS wish list a few months ago. However, this post is about what we can do to improve the here and now.
Having a system/ Keeping it simple
When trying to manage any code base, having a system is important. This is generally available in the form of coding standards and guidelines. Unfortunately, these documents can quickly become bloated, reducing their usefulness, by reducing their “readability”; lost in a sea of standards and guidelines on dated wiki or worse, a forgotten directory living in a far off network drive; or as in most cases, due to unrealistic deadlines, standards taking a back seat to an iota’s more code been churned out.
Keeping a simple system, such as alphabetising your properties makes it not only easy to remember, but also easy for developers joining your existing project to become familiar with.
As well as alphabetising my CSS, I also like to include similar properties on the same line — think border-*, font-*, margin-*, etc — as long as readability is maintained. Consider the following rule:
.foo {
background : #fcc ;
border-color : #fee #fee #faa #faa ; border-style : solid ; border-width : 1px ;
color : #333 ;
float : left ;
font-size : 1.1em ; font-weight : bold ;
height : 50px ;
margin : 3px ; margin-left : 5px ;
padding : 2px 4px 3px ;
position : relative ;
width : 150px ;
}If I want to know what font properties are declared in the rule, my eye scrolls down from b, c to f, if I want to know what margin properties are declared, my eye scrolls down from b, c, f, h to m.
Compare this to the same rule with the properties in a random order:
.foo {
position : relative ;
float : left ;
height : 50px ;
width : 150px ;
margin : 3px ;
border-color : #fee #fee #faa #faa ;
border-style : solid ;
border-width : 1px ;
padding : 2px 4px 3px ;
margin-left : 5px ;
font-size : 1.1em ;
background : #fcc ;
color : #333 ;
font-weight : bold ;
}The first rule is making CSS easy to skim through, eliminating the time it takes to find specific properties in a rule. The second rule requires more time to look through to find there is margin-left override on the previous margin property, more time to see that there is a font-size property as well as font-weight property on the rule, etc.
Though this “extra time” might not seem like much at first, when you start looking at the size of some CSS files — anywhere from 700-2000+ lines — it can quickly add up!
Tools like Firebug alphabetise your rules for you — as well as showing you what rules belong to what files — in their CSS editors. However, this doesn’t always stop people lazily copying and pasting the code from firebug into their CSS files without first removing the existing rules. These tools also don’t show duplicate properties on a specific rule, so be careful not to duplicate properties!
Rules are meant to be broken (sometimes): Browser specific CSS3 properties
The only caveat to this very simple method of keeping your CSS tidy is the new CSS3 properties available in some browsers. The main reason being: browsers’ implementations of these properties using their own specific namespace e.g. -moz-*, -webkit-*, etc.
There are two ways we can work with these properties: by sticking to the original guideline and having all the browser specific properties at the top or bottom of the rule. Shown below:
.foo {
background : #fcc ;
border-color : #fee #fee #faa #faa ; border-radius : 3px ; border-style : solid ; border-width : 1px ;
box-shadow : 1px 1px 7px #999 ;
color : #333 ;
float : left ;
font-size : 1.1em ; font-weight : bold ;
height : 50px ;
margin : 3px ; margin-left : 5px ;
padding : 2px 4px 3px ;
position : relative ;
width : 150px ;
-moz-border-radius : 3px ;
-moz-box-shadow : 1px 1px 7px #999 ;
-webkit-border-radius : 3px ;
-webkit-box-shadow : 1px 1px 7px #999 ;
}Or, by separating out the CSS3 properties onto a separate line and including the browser specific versions of these properties on the same line, as in the example below:
.foo {
background : #fcc ;
border-color : #fee #fee #faa #faa ; border-style : solid ; border-width : 1px ;
border-radius : 3px ; -moz-border-radius : 3px ; -webkit-border-radius : 3px ;
box-shadow : 1px 1px 7px #999 ; -moz-box-shadow : 1px 1px 7px #999 ; -webkit-box-shadow : 1px 1px 7px #999 ;
color : #333 ;
float : left ;
font-size : 1.1em ; font-weight : bold ;
height : 50px ;
margin : 3px ; margin-left : 5px ;
padding : 2px 4px 3px ;
position : relative ;
width : 150px ;
}My preference is for the latter version. My reasons being:
- It’s easier to update the properties as they’re all on the same line; and
- It’s easier to skim through the standard CSS3 properties and then see the browser specific properties next to them.
Conclusion
Alphabetising your CSS properties is an easy way to neaten up your CSS, eliminate the possibility of duplicate properties in the same rule and it generally speeds up finding properties in a rule.
It will greatly improve a new developer’s familiarisation with your project’s CSS codebase, as it provides a very simple guideline to follow.
This is part 1 of a 3 part series.
