Last week, in Part I of this set, I talked about small but significant ways to optimize your CSS. In this article I suggest some methods for keeping your CSS organized. While some of the tips here may counteract optimization techniques, they’re helpful in simplifying work within your stylesheet. If you’ve ever tried to work with a fully optimized file, you know what a cluster it can be to sort through. Save yourself a headache by trying some of the following… you can always crunch it up again when you’re ready to FTP.

Use prominent comments

One of the things I’m in the habit of doing is beefing up comments for the main portions of a site, like this:

Obvious comments can save you a lot of time searching and scrolling during development, and later if you need to make changes after your design is complete. It also helps to “map” your site’s layout, giving you clear indicators of what’s what.

For example, I comment the most prominent sections such as Wrap, Header, Navigation, Content, Sidebar, Search, Comments, and Footer¹. Anything else I usually group into Miscellaneous. Commenting my code in this way breaks up the CSS into easily identifiable blocks.

Give meaning to your structure

Every designer acquires a coding style which makes sense to him or her, but the technique I found most effective, is to organize blocks of CSS according to how the page renders. In other words, what section (or div) they fall under. This goes hand in hand with good commenting, and makes finding things a lot easier.

So for example, I’ll list basic HTML formatting rules for body, headings, anchors, paragraphs, images, etc., first. Then I’ll list styles for main sections, such as header, content, sidebar and so forth… down to the footer last. This way, if I have to modify something later, say in the comments section, I know to go directly to that block. Since the stylesheet “matches” the design, I don’t have to dig through my HTML first to get the div name for the item I want to change.

I’ve seen stylesheets where the code is grouped by element instead (all the titles together, all the lists, the links, etc). For me, that method makes it too easy to forget what belongs where. This is especially true if you have a complicated design, or often work on multiple sites.

Space out your syntax

A certain amount of “whitespace” is necessary to maintaining a usable style sheet. Good syntax may look something like this:

#content h2{
font-size:1.4em;}
Here the selector is on a line of its own, with each property/value pair indented, and on their own. This creates a nice readable format. Many people put the closing bracket on a separate line as well, but I prefer to bring the bracket up, then leave an empty line in its place. Sounds silly, but to me it just looks cleaner. I’m quirky that way. :)

Some designers prefer to skip this format in favor of putting everything on one line, and indenting inherited styles instead. While this does help to keep file size in check, I find it more difficult to scan through when looking for a specific declaration – particularly if the rule is lengthy. An example may look something like this:

So, that’s it. I hope this tutorial at least gave you some ideas for organizing your styles in a way which makes them a little easier to work with. Do you have any useful (or quirky) CSS coding habits to share?

¹Referring to Wordpress themes specifically.