When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that.

Reusing Semantic Class Names

While in most cases semantic class names really don’t help achieve much, there are a few in which they can be quite helpful. One of these is when describing element states, such as .selected.

Oftentimes, people only use classes when there are multiple elements on a page that are to share the same styles–this isn’t the only way to use them, however. Say we have a tabbed horizontal navigation on the top of our page:

<ul id="tabs">
	<li><a href="#">tab 1</a></li>
	<li><a href="#">tab 2</a></li>
	<li><a class="selected" href="#">current tab 3</a></li>
	<li><a href="#">tab 4</a></li>

We’re going to want to give the .selected link some extra styles. But now say we also have a form somewhere on the page and are using JavaScript to add some styles when a radio button has been selected. When the button is selected, our code would look something like this:

<form action="#" method="post">
	<input type="radio" name="button" value="value">
	<input class="selected" type="radio" name="button" value="value2">
	<input type="radio" name="button" value="value3">
	<input type="radio" name="button" value="value4">

Using selectors, we can give each of these different styles:

li .selected {
/* styles go here */

form .selected {
/* styles go here */

This makes our CSS easy to read and our classes easy to keep track of. When you have tons of elements with different styles, keeping track of all the IDs and classes can become difficult–this shortens that list and lets us use easy-to-remember names.

Name your <body>

When working with multiple pages, most of the time you’ll be re-using many of your styles but will need slight variations. Having the same code repeated several times in your stylesheet with minor variations wastes space, is hard to keep track of, and just isn’t necessary. For an example, let’s take our previous example and say that our navigation has these styles:

ul#tabs li {
float: left;
padding: 5px;
color: #000;
background: #fff;
font: 1em tahoma;

Now what if on all our subpages we want the same thing, but with less padding? We could create a new list, copy/paste all these styles, then modify the padding. But that’d be pointless. Instead, we add a class to the body on our subpages (say, subpage) and just add this into our stylesheet:

.subpage ul#tabs li {
padding: 2px;

And that’s it.

Keeping IE Happy

One of the biggest time consumers in CSS development is, of course, IE debugging. With IE7 now on the loose, this can get even more complicated. However, using one IE-only stylesheet that can target both IE 6 and 7 as well as each individually, this can be made much simpler.

To do this, first we set up our conditional comment with included stylesheet:

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
< ![endif]-->

Within this stylesheet, we can then add any styling fixes that are needed for all versions of IE (just make sure that your styles will take priority over the ones in your main stylesheet–I usually add “html body” at the beginning of each selector). For fixes that don’t need to be done on IE7, we simply use the * html hack. For IE7-only fixes, add html > body before the selectors.

By doing this, we can target specific version of IE within one stylesheet and still keep it separate from our main stylesheet.

Go Forth and Write Code

Any other tricks you use to speed things up while staying organized? swan