CSS Best Practices

Everyone has a slightly different approach to CSS. That’s part of the reason it can be a nightmare to edit someone else’s code.

But there are a few good practices you can use in your CSS to make your stylesheets easier for you to read, and easier for anyone else that ends up modifying them in the future.

Single-line vs. Multi-line

The first decision you’ll have to make in your CSS is whether you want to write it on multiple lines, like this:

.title {
        font-size:14px;
        line-height:20px;
        color:blue;
}

Or on one line, like this:

.title {font-size:14px;line-height:20px;color:blue;}

When I started out, I began with the first method. By spreading the different CSS properties out onto different lines, you make them easier to read. That’s a great help when you’re still getting used to CSS.

As I got more confident with CSS though, I swapped to the second method.

Once you’re comfortable with CSS, the biggest time waster becomes finding the element (the .title part) you need. When you’ve split every property into its own line, the file becomes very long and unwieldy. I find it easier to scan down with the second method.

The file size is quite dramatically cut down (more on that later).

Of course, a lot of people will disagree with me there! This choice comes down mostly to personal preference. If you’re happier with one over the other, then go with it.

Section Your File

Like I said above, one of the biggest hassles of working with CSS is simply searching for the line you need to edit. To help with that, it’s worth dividing your file up into sections.

For example, you could have a “header” section for all the rules relating to the head of your page. Then when you need to edit your slogan, you know where to look. A simple comment above each section is all you need:

/*** Header ***/

Start With a Reset

Every browser applies its own slightly different styles to elements by default. The idea of a reset is to take away all of the styles a browser might add. It helps a great deal when it comes to browser inconsistencies.

A reset can be as simple as adding this at the start of your stylesheet:

* {margin:0;padding:0;}

Or if you want a more comprehensive reset file that will cover everything, check out Eric Meyer’s CSS Reset.

Use Shorthand CSS

Shorthand CSS is simply combining a few related rules into one. Let’s take an example to see why it’s useful.

For example, if you wanted to set a blue background with an image in the top right corner, you might normally do something like this:

.example {
        background-color: blue;
        background-image: url(images/blue-bg.jpg);
        background-position: 100% 0;
        background-repeat: no-repeat;
}

But this could be combined into one simple rule:

.example {background: blue url(images/blue-bg.jpg) 100% 0 no-repeat;}

It can take time to get used to the order of things in a shorthand rule, but once you do, they become second nature, and the advantage is clear!

You can read more about what shorthand CSS options there are at Dustin Diaz’s site.

Multiple Classes on One Element

This is often an unknown aspect of CSS, but it’s possible to add as many CSS classes to an element as you want.

The reason to do this is that you can define generic CSS styles that can be applied to a number of elements.

Let’s say you set up CSS styles for positioning and for info, then you could do something like this in your HTML:

<p class="info left">Some example text in your info paragraph.</p>

That way the paragraph gets the appearance of an info paragraph, and you don’t have to redefine the styles for aligning it to the left.

Generic CSS Styles

Positioning Header Elements is Easy

In most sites, the header is a set width and a set height. With the rest of your page, the height changes depending on the content within (Long pages of text = longer pages), but with the header, the height never changes.

That means you can use absolute positioning for everything in your header. Positioning is one of the harder parts of CSS to wrap your head around, and the tendency at the start is to learn one way (e.g. floats) and just make do with that.

Let me give you can example of why absolute positioning is worth learning:

#header {position:relative;width:960px;height:120px;}
.logo {position:absolute;top:20px;left:20px;}
.slogan {position:absolute;top:70px;left:20px;}
.searchform {position:absolute;top:20px;left:600px;}

And in 4 lines, you’ve positioned every part of your header. It doesn’t get easier than that. That’s how I lay out every header I code.

Don’t Worry About Ems

There are a few different units of font measurement in CSS. Pixels, “em”s, and percentages. Ems and percentages are a way of laying things out relative to the line-height.

An old piece of advice was always to use ems because certain browsers (Have a guess which one…) couldn’t resize pixel fonts. That was a major downfall for building an accessible layout for users who need larger font sizes.

Nowadays though, any modern browser can work with pixel fonts (Because most of them use zooming now, instead of just making the fonts larger).

FireFox Zoom

Pixels are much, much simpler to work with in your CSS. And given that they work every bit as well as ems now, there’s no need to complicate things.

Unordered Lists Make Things Easier

Again, this was something I didn’t pick up on until I’d worked a lot with CSS. You’ll start out by thinking of HTML unordered lists as a way of listing bullet points, but in reality, they’re a great way of marking up any sort of “list” content.

Aside from unordered lists, what about the navigation bar in your header? Or a set of subscription options after a post? Or the elements in your sidebar?

With your HTML well marked up, you can easily apply styles to all of the parts of your “list”, e.g. for your sidebar:

ul#sidebar li {margin: 0 0 20px 0; border:1px solid #000;}

Use Comments

Comments are a way of adding some explanations to your code. Thankfully, most CSS is self-explanatory and you won’t need to worry about commenting extensively.

You should however use comments for any tricky parts whose purpose may not be immediately obvious. For example, if you added an extra rule or two to make sure things worked in IE, you might want to add a comment saying why those rules are there.

CSS Comments

Stay Consistent

A lot of the things we’ve talked about come down to personal style and choice. Once you’ve made your choices though, you should make an effort to be consistent.

If your style constantly changes from one project to another, then when you go to edit the file again in 6 months time, you might find it a headache even to work with your own code now!

On top of that, if you stick with a certain approach for a while, it gives you time to really try it out and see if it works for you (e.g. if you swap from multi-line CSS to single-line, I can guarantee your next project is going to be harder than normal. But in 3 or 4 projects time, you might find you’re faster than ever before!)

Minify Your CSS

When you’ve finished laying out your CSS in the most human-friendly way possible, it’s time to think about the machines.

If your file is smaller, it’s going to download quicker. How do you make it smaller? By cutting out all of your comments and whitespace. You keep the human-friendly copy for you to edit, and then use the machine-friendly one as the actual file to be downloaded.

For a simple tool that takes care of this, check out Minify CSS. For a more complex tool, have a look at the YUI Compressor.

Minify CSS

It’s up to you whether or not you want to do this. The advantage is faster loading times, but the disadvantage is that it’s a nuisance and you have to redo it every time you update your CSS (Also, if you’re doing it for a WordPress theme, you’ll need to add the theme info comments back in each time).

For those reasons, I don’t do this all the time. For clients who want to make slight CSS edits themselves occasionally, this is usually a big no.

Even for my own site, I already use single-line CSS so running my stylesheet through the minify tool above gives a 7% reduction. That’s about 1kb. It’s not worth the effort there.

How Do You Write Your CSS?

The tips I’ve given above are all to do with how I write my CSS. Do you have any other tips you’d like to share? Or disagree with anything I’ve mentioned? I’d love to hear it in the comments!

Of course, if you’re working with a CSS framework, your standards are going to have to align with theirs. There are a lot of good frameworks out there, so take the time to find one that you can work with easily. Check out this list at 1st Web Designer for an overview of several different frameworks.

Enjoy this post? You should follow me on Twitter!