I’ve been writing CSS for several years already, and I can honestly say that I’m still never completely satisfied when I finish a website. It always seems like I could have optimized just a little more, or done things a little differently. CSS by itself is not a complicated pseudo-language, but it does have some intricacies that come with experience. Here are five quick-and-dirty tips to give you a hand and to get you started on the right track.

1. Give your classes proper names

If you’re developping a stylesheet for a client or for some sort of public distribution, I forbid you to call your classes and IDs generic, non-descript names like .t121-2. Use proper names like .sidebar-container or I’ll come to your house and kick your puppy. I mean it. I can’t tell you how much time I’ve wasted deciphering incoherent CSS and I still don’t understand why people still refuse to do this.

2. Spend the extra time to design your Stylesheet

While this isn’t the best solution when it comes to optimizing, it’s usually not an issue unless (until) your websites receives heavy traffic. Design your stylesheets and space everything properly to show parent/child inheretence will save you a lot of time and many headaches when it comes to debugging.

It’s also a good idea to seperate your stylesheet into logical sections. In my case, I’ve divided it into several:

• Framework (columns, site structure)
• Left Column content
• Center Column content
• Right Column content
• Footer
• HTML definitions
• Generic, all-pupose classes

It then makes it easier to modify or update. Here’s a quick example of a proper inheritence tree:

div#container {}
   div#container p {}
      div#container p a {}
   div#container span {}

3. Design with parents, not with classes

Too often, I see people assigning classes to every little element on their pages. Bad coders, bad! An easier way to deal with styling elements inside containers or block elements is to simply define their wrapper.

For example, I have a paragraph inside a container, say #sidebar-comments which need to have their line-height increase.

Wrong:

p.sidebar-comments-content { line-height: 1.2em; }

Right:

div#sidebar-comments p { line-height: 1.2em; }

By defining the paragraph style as a child of the sidebar-comments divider, you avoid unnecessary markup. Keep in mind that this is only relevant when you want the change the apply to all the defined elements in the container. Just don’t overdo it. Too many child/parent selectors is just as bad.

4. Use a Reset stylesheet

It’s a well-known fact that browsers render objects differently. Internet Explorer will render an input box differently than Firefox or Opera will. That’s why it’s always a good idea to implement a Reset stylesheet. In a nutshell, it will remove all default browser attributes from elements like padding and margins, forcing you to style them which allows much greater compatiblity between browsers. This doesn’t take care of all compatibility problems, but it sure does help identify them.

I’ve been using Eric Meyer’s for years and would highly recommend it. Don’t forget to make the browser load the reset stylesheet before your design stylesheet though! Keep in mind that some reset sheets are not W3C valid, so get a good one!

5. Debug with colors

Debugging sucks. I know it, you know it. If you can’t quite figure out where your container ends, here’s a nifty trick: pink it. That’s right, pink it.

div.debugger { color: pink !important; background-color: pink !important; }

I can guarantee you won’t have a hard time finding it after that.

That’s all for now! Stay tuned for more tips later. Drop me a line if you need any help!