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:

/***********
** HEADER **
************/

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:

/* Table of Contents:
*
* INTRO
* HEADER
* FOOTER
*/

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.