Organise your CSS

When you are working with style sheets, it’s all too easy to end up with a long list of rules – and it starts to become more and more difficult to find your way around when editing the CSS file. I’ve made a decision to become a bit better organized in future.

After looking at other people’s style sheets, I realised that mine are sometimes not as well organised as they might be (ahem). For great style sheet organisation you can’t beat Wilshire One and the White and Wild template. I was testing this template in a project (which came to nothing in the end) and it was a joy to use the style sheet. It made the process of understanding it much easier.

Better style sheet organisation should help to decide which styles are actively used (and which have hardly ever been used!). The end result should be a leaner, meaner CSS file. At the same time, it should be easier to re-edit the style sheet in a few months time when I come back to it. That’s the theory anyway.

This may evolve over time but I plan to organize my style sheets into sections such as:

• the main divs and their descendants
• navigation menu styles
• link styles
• image styles
• styles for specific tasks eg rounded corners
• general styles

I will also be indenting more consistently and adding more comments to make things easier to read and find.

This is hardly rocket science (or new) but, if I do nothing else, grouping things together more should help. It will also enable me to put a bit more thought into the process (which I sometimes need to do!).

· Further reading » Tips for organizing your CSS | Flags to help you find styles in your CSS