Reset your way to cleaner, faster HTML/CSS “coding”

This post compliments of InstantRails downloading at an average of 10 kb/sec.

One of the biggest pains in writing HTML/CSS is making sure your beautiful design looks good across all the A-grade browsers (IE 6/7 Win, FF 1.5/2, Safari 2, Opera 9).

This specific “job responsibility” is the bane of my existence as a “web guy.” Conditional comment this, CSS hack that. *puke*

Realistically, it’s not that bad.

I was just a young pup that didn’t know any better. Now I do thanks to some quality articles over at Smashing Magazine.

  1. CSS Frameworks + CSS Reset: Design From Scratch
  2. 35 Designers x 5 Questions
  3. 70 Expert Ideas For Better CSS Coding

In particular, take note of the tips talking about a resetting the default browser styling.

That tip alone is worth the free price of admission. It has caused the scales to be removed from my eyes. Now cross-browser CSS is no longer the bane of my existence.

In all honesty, it really does help a lot. The basic idea is that by default, Firefox tends to display things differently than IE, differently than Safari, differently than Opera.

So by resetting these defaults, you can ensure you’re starting on the same playing field across all browsers. Doesn’t sound all that impressive, but it definitely makes CSS coding a lot easier and less error-prone.

Give it a whirl.

I personally use Eric Meyer’s reset.css because he graduated from the same college I did. ;) And because he is generally well-respected in the design community.

A “coding” disclaimer

Alright, so I had to put “coding” in quotes.

// assume positive input
int fib(int i) {
  return (i < 2) ? i : fib( i - 2) + fib (i - 1);
}

The above is code.

<html>
<body>
I only wish I could return you the
nth number in a Fibonacci sequence.
</body>
</html>

The above is not code. I don’t care who you are.

With that said, I can sleep peacefully tonight.

Get Email Updates

Enter your email address and I'll shoot you an email whenever I make a new post. Easy peasy!

Leave a Reply

Your email address will not be published. Required fields are marked *