As you push on with your latest design, you might find that your stylesheet begins to build up rapidly. Before you know it, you’ve got line after line of code, with buried hacks and declarations all over the place, and some you can’t even remember what for!

So you end up back and forth between HTML and CSS, reminding the old brain what that class was there for. Then you fire up your browser and find IE is playing up again, so back into your CSS you go. But where is that declaration? Somewhere in that style haystack, but goodness know where!

Ok, slightly exaggerated. But this tale was not too far from the truth when I first started. It may require a little more effort, but the pay off is accessible, marked up CSS at your fingertips.

Comment It

Alright, it’s an obvious one. But comments are extremely useful for jogging the memory. Even if you never need to edit it again, well, sods law you will. If it’s a hack or non-generic style, then comments are well worth the effort. You don’t need to be too specific either, anything that you will understand will do.

You can make a comment like so;
/* Comments Here */

Comments can span multiple lines, so long as they begin with /* and end with */.

Separate It

One of the biggest advantages of CSS is keeping layout separate from content. So whenever you can, use external stylesheets. Inline styles may seem an easy option from time to time, but the harder you stick to keeping them in their own stylesheets, the easier it’ll be to edit later on.

Sort It

One of the best ways to manage your styles is… break them up! An example would be to separate your header, content and footer styles using a separate stylesheet for each. This way, it’s easier to find a declaration when you’re working on one area of your page, and each sheet has a smaller amount of code for you to filter through.

You could also try separating layout from styles, or keep just colours and fonts on their own. You can even declare certain properties of a selector in one sheet, and the rest in another! It’s completely up to you to decide what works best for your scenario.

Import It

So now you’ve got your separate stylesheets, how are you going to link them to your HTML? Well, we could do this
<link href="header.css" mce_href="header.css" rel="stylesheet" type="text/css" media="screen" />
<link href="footer.css" mce_href="footer.css" rel="stylesheet" type="text/css" media="screen" />
<link href="content.css" mce_href="content.css" rel="stylesheet" type="text/css" media="screen" />

But why not use the magic of @import?
<link href="screen.css" mce_href="screen.css" rel="stylesheet" type="text/css" media="screen" />

Here we’ve got just one link in our HTML. Let’s take a peek inside screen.css
@import "header.css";
@import "footer.css";
@import "content.css";

The @import rule ‘pulls in’ the specified stylesheet, relative to the sheet the rule is in. In this case, header.css, footer.css and content.css are in the same folder as screen.css. You can also specify the absolute url if you’d prefer, as well as a medium
@import url('http://www.mysite.com/styles/sheet.css') screen;

A great advantage of the @import rule is you can add or delete stylesheets with ease. No need to edit your HTML, just modify the rules in your screen.css file.

So there you have it. Lean, mean CSS that you’ll cherish for generations to come. Or flog for ridiculous amounts of money

Categorised under: CSS, Designing a Website, Tips & Tutorials by Alex S