CSS Organization Tips

It goes without saying that CSS is now used for layout on a vast majority of websites however for anything but the smallest website keeping your CSS files organized can be tricky. I’ve complied a list of CSS organization tips that I’ve found to be invaluable for both saving time and avoiding bugs. These aren’t meant to be the definitive guide by any means but in the 5 years or so that I’ve been coding CSS they have proved very reliable.

Using Helper Styles

The first thing I always start my CSS file with other than the usual copyright and author information is a series of sanity saving rules. The first rule uses the star selector to reset all the padding and margins for all html elements so that you don’t have to keep doing this for every individual element. This not only cuts down on the file size of your stylesheet but also means you won’t be wasting time trying to figure out why your layout has lots of extra space in certain browsers.

I also set borders on all images to 0 so I don’t have to worry about them and the last two are common css rules that I’ll always end up using at some point. You could easily expand this section with any of your own commonly used css rules.

* {margin:0;padding:0;}
img {border:none;}
.clear {clear:both;}
.hide {display:none;}

Clearly Layout your CSS

Scanning through a long stylesheet isn’t much fun so it makes sense to structure your styles into a logical and easy to find way. I use the following comment headings to I can easily find sections when scanned through the stylesheet. It’s also worth noting that Stop Design’s tips on setting flags would improve this even more (see further reading for more details on this).

/* Layout
***********************************************/
#header, #nav, #footer etc
/* Typography
***********************************************/
h1, h2, h3, p etc
/* Lists
***********************************************/
ul ul li etc
/* Links
***********************************************/
a:link, a:hover
/* Forms
***********************************************/
form, fieldset, input, textarea etc
/* Tables
***********************************************/
table, th, td etc

Use Conditional Comments for IE Browsers

Lets face it most of our time as css developers is spent debugging IE browsers but having a stylesheet full of browser hacks isn’t the best way to ensure future compatibility. What if these hacks are broken when IE 8 is released for example?

I’ve been using conditional comments for some time now as they are simple to implement and are recommended by Microsoft as the best way to code css for each of its browsers. You can therefore ensure that these will be supported long term. Conditional comments should be placed in the head of your HTML document after your main stylesheet and typically I’ll place them in an include file so I only have to update one file no matter how large the site. See below for a typical example of how to add extra stylesheets for IE 6 and IE7.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" http://www.yourdomain.com/css/ie6.css" />
<![endif]–>
<!–[if IE 7]>
<link rel="stylesheet" type="text/css" http://www.yourdomain.com/css/ie7.css" />
<![endif]–>


I promise if you implement these simple techniques you’ll make the css development cycle quicker, easier and a lot more fun. I’d be interested to see what other techniques readers use to organise their stylesheets so feel free to add to this list in the comments. In the meantime check out the following further reading for some great tips on flagging and css shorthand techniques.

Further Reading

• Using Flags to Organise CSS
• CSS Shorthand Properties