CSS Organisation – Sections

This is the first of a few posts on some CSS organisation tips. These are by no means unique to me or new ideas but are the ones I have found to be consistently useful over the years.

Splitting the CSS file up into sections of similarly grouped declarations is invaluable as a way of finding the rules you are looking for easily.

We use the following for the section headers as it is easy to find if you are just scrolling through the document:

Of course, scrolling through the document is not an ideal way to find the section you are looking for. Using the editor’s find function will get you there much more quickly. Just searching for header may match other text in the file, this can be avoided in two ways by using the above format:

  1. Using caps sensitive searching and entering HEADER as the search term, since we do not use all caps for id or class attributes this will find it.
  2. Including the asterisk and space before the search term will also find the section name rather than other text in the file e.g. * header as the search term.

This is all well and good if you have all you section headings memorised but I find it helpful to list the section headings as a table of contents at the top of the file. A cut down version looks like this:

This way you can just select the section you want and use the find function without even needing to type out the section header making for very quick navigation around your document.

You can of course denote your section headers in several ways with different version having some merits. Putting a symbol which has no use in CSS directly in front of the section name may make finding it easier. However these are variations are fairly minor and it is not worth worrying too much about which is the best to use, consistency within the notation you use is what make this technique useful.

IE Conditional Comments and XSL

Yesterday’s post reminded of the following issue with conditional comments for Internet Explorer when you are using XSL as a templating system as we are at Lime Thinking. If you just enter the following into the XSL file:

then it will be treated as an XSL comment and will not appear in the processed document. It instead needs to be inserted in the following way:

This will then appear in the output document as the HTML comment in the first example.

Internet Explorer Conditional Comments and JavaScript

As we prepare for the launch of the new Lime Thinking website, I have been looking at the front end. One issue we have found is getting some of the JavaScript enhancements working in the older versions of Internet Explorer. Whilst we are using jQuery which deals with most of these browser variations very effectively we have still run into issues with CSS bugs in Internet Explorer. I decided to just leave these enhancements out for Internet Explorer versions 6 and 7.

So how to do this? The arguments against browser sniffing are well known and I am not going to rehash them here, whilst jQuery provides some support for browser detection they recommend not using it. The alternative is using feature detection, which of course makes a lot more sense when it is specifically support of particular JavaScript function that is the issue. In this case it is CSS bugs that is the issue so this is less relevant. Whilst this undermines some of the arguments against old school browser detection I decided on a different solution.

Since we are already using conditional comments to include IE specific style sheets, why not also use the conditional comments to set a JavaScript variable? So we replaced the following:

With this:

The variable is initialised first to false before being set to the required value in the conditional comments. Using the targeting of different  versions of IE via conditional comments allows us have good control over which features are turned on and off for different versions.

Now in the JavaScript we can check the variable to avoid setting an enhancement for an old version of IE with a guard clause:

Different versions of IE can be targeted using different combinations of conditional comments allowing good control over which version have different enhancements applied.

Hudson now Jenkins

At Lime Thinking we have been using Hudson as our continuous integration server.¬† Hudson has now effectively forked into Hudson and Jenkins due to a dispute over the name with Oracle, the Jenkin’s blog has details of what happened.

We will be moving over to use Jenkins as this is the community project and the version the existing developers will be working on. Upgrading from Hudson is apparently painless. I will let you know how we find this and of any issues that arise.


Welcome to my new blog. I am Richard Miller a director at Lime Thinking Ltd. I will be blogging mainly about PHP and development tools and best practices around it.I will probably also cover a bit of front end web design at times. We are currently preparing for the launch of our new site and since I have been involved in the front end design my first posts will probably be related to subjects of interest that have arisen form that.