Keeping CSS Code Clean and Optimized

If HTML is the structural basis of a Web page, CSS determines the appearance of that page. The CSS will tell the HTML where to be and how to look.

The biggest challenge in designing with CSS is browser compatibility. The three main browsers: IE, Firefox and Safari, all render CSS a little bit differently. Even worse, different versions of IE have their unique issues with CSS.

This makes writing clean CSS all the more important. Not only will your code be easier to read and faster to load, but it will help you avoid the various browser obstacles.

The first step to clean CSS is clean HTML. After all, if the foundation of your house is slanted or rotting, no amount of facade work is going to keep it standing.

1. Don't Use Tables for Layout

Using tables for layout can be tricky, and always makes your HTML file bloated and messy. Search engines won't read your content hierarchy correctly if you use tables to create side navigation, and nested tables take longer to load.

Tables are invalid in XHTML 1.0 and HTML 4.0, unless they are used to display data. Invalid code means more time fighting browser bugs. So use tables for tabular data and leave the layout to divs, which you can style later in your CSS.

2. Use a Strict Doctype and Validate

Since we're not using tables for layout, go ahead and use the Strict XHTML 1.0 or HTML 4.0 doctypes.

Strict doctypes don't allow deprecated tags or frames. They encourage you to set all formatting in the CSS.

When you're done writing your HTML, run it through a validator to make sure you didn't make any mistakes.

3. Indented Structure

Your HTML is likely to have a lot of parts: divs, headings, paragraphs, lists. Each of these parts has an opening and closing tag.

Although indenting will not affect how the page loads, it will make the code a lot easier to read.

So: Indent one tab when you start a new element that is a child element of the tag above it. Then move back in a tab when you close that element.

This will allow you to see very clearly what content is being affected by a parent element, and also make sure you have closed all your tags.

4. Inline vs. Block Elements

HTML can be broken up into two types of elements: inline and block.

Block level elements can contain other block elements, inline elements and text.

Examples: <div>, <h1>, <li>, <p>

Inline elements add markup to block elements. Inline elements can only contain other inline elements or plain text.

Examples: <a>, <def>, <img>

Nest your tags properly for correct browser rendering and valid HTML.

5. Miscellaneous

Instead of typing & or @ as you would in a word processor, use a character set and encode your characters.

Keep your CSS and HTML separate. Instead of putting CSS inline or in the head of the HTML, make it an external document.

Use naming conventions for elements that describe the content they contain, rather than the style being applied.

Alright, now you've got a solid foundation. Time to apply the CSS.

1. Reset

Every HTML element has some default styles attached to it which are dictated by what browser you use. If you reset these elements in your CSS, you won't end up checking your site in Firefox and wondering why it looks nothing like the same site in IE6.

Check out Eric Meyer's reset code for a great example.

2. Structure

"Wait a sec, I thought all the structure was in the HTML!"

It is. This isn't content structure, but a way to organize your CSS so that you can read it easily and find the elements you want to change later.

Use comments to create sections in your CSS. There is no one right way to do this, some people just separate the reset from custom code, others create sections based on the divs in their HTML, others alphabetize. The idea is to make is easy for you and others to read the file.

Some designers recommend separating your layout styles from other styles. This is called "Future Proofing," which means that as CSS evolves, you'll be able to change the key elements - the layout, fairly easily.

Also, use white space to make your files legible. It does add a little weight to your file, but not enough to make it worth sacrificing readability.

3. Comments

Aside from using comments to give your CSS file structure, use them to explain what your doing with your CSS code. If you're using em's instead of pixels, comment on the pixel conversion for clarity.

You can also use comments to remind yourself when elements are being affected by parent elements.

4. No Hacks!

Hacks can interfere with other parts of your CSS, bring out other browser bugs, bloat your code and make it invalid.

OK, you can serve conditional declarations for IE, if you really have to. It won't bloat the code too much because it will only be downloaded by non IE browsers.

But most of the time, it should be possible to get your site to work the same way in all the browsers without using CSS hacks.

5. Miscellaneous

As with your HTML, validate your CSS.

There are some tools you can use to compress and tidy your CSS, but be careful and test the results first.

These are just a few ways that you can keep your CSS legible by both humans and browsers. Clean code means fewer bugs, easier editing and faster page loads. Of course, nothign can beat a formal education in HTML, CSS and web standards.

For more tips, check out 7 Principles Of Clean And Optimized CSS Code and 12 Principles For Keeping Your Code Clean.