• Print this Article

I hate hacks. I hate dirty code. When I see a inline styles, I cringe. But probably the thing I hate most is when I look at someone's CSS and see the dreaded "Asterisk hack". Sadly, even as I write this in 2010, even at this late stage of the game, I still see hacks like this all too often. Even people that call themselves "Front End Developers" still resort to dirty little hacks like these, seemingly oblivious to a better solution that has been around for years.

Put a Fork In It

When it comes to IE, Put A Fork In It!  That is, use IE's forking technology -- also known as "conditional comments" -- to load specific stylesheets that cater to different breeds of IE.  If you don't know what I am talking about read up on it here: http://www.quirksmode.org/css/condcom.html

Here is an example of four IE forks:

Although the ones above target four conditions (any verison of IE, less than IE 7, IE 7 and IE 8), these days I usually target only IE 6 and earlier, and IE7.  It is rare for IE8 (and hopefully higher -- we'll see!) to give problems.  By targetting IE like this, you can avoid all of the horrible asterisk and underscore hacks I have mentioned, as well as other ugly hacks.

Use a Reset, but Don't Use a Framework

I like to use a reset at the start of my CSS to "bring different browsers together".  That is, get them to act similar from the beginning, by stripping base selectors of much of their behaviors, and letting me start fresh. I have been using Eric Meyer's popular reset for a couple years now.  (I used to have my own, but figured his is better and simpler.) 
It is available here: http://meyerweb.com/eric/tools/css/reset/

Frameworks are getting a lot of buzz lately.  You can read about them here: http://www.noupe.com/css/...ing-started.html if you like.  But you should know, if you know CSS well, you probably won't like them.  They all strike me as something "programmers" have made to make CSS easier for them, without concern for if it is good CSS.  I have heard many programmers over the years mention how they don't like CSS, and how it should be changed and made better.  What they don't seem to get is CSS is not a programming language.  Trying to change it to make it like one is like washing your laundry in a microwave. And using a framework amounts to about the same, if you know CSS well, anyway.

Use Semantic Markup, and few IDs and Classes

In the html world, for the last many years using semantic markup has been considered the right way to code.  I share this belief.  If you use tables for tabular data, and stick paragraphs in <p> tags, it leads to cleaner, more maintainable code.

Something often overlooked, however, is that the less IDs and classes you use, the cleaner and more maintainable your code is as well. Once you use a reset, you can usually achieve what you want stylistically just by using headings (h1-h6) and paragraph tags. In the event that you need to change the look of headings (or other elements), instead of assigning different classes to them, you can put them in a div with a class, and use the "cascade" of CSS to target all of the headings and paragraphs. This way, if you had 6 different styles for h1-h6, you only need to have one class name for the container that holds them. Your individual <h1>-<h6> tags will still look clean and un-classed!

Also, keep in mind that IDs are for two things: single instances of a style, and designating greater weight to an element. Don't use classes where IDs are more suitable, or vice-versa. If you don't know what I mean by the greater weight of IDs, read this article http://www.smashingmagazine.com/2007...should-know/ on specificity.