Yahoo vs. Eric Meyer CSS Reset

In my post titled WebVisions 2008 Conference Debriefing, I mentioned the concept of a CSS reset and provided links to two versions: the Eric Meyer CSS Reset and the Yahoo UI Library CSS Reset. Both address the issue of browser having their own internal stylesheets that don't necessarily match.

For example: an h2 tag in one browser might have font-size: 16px; and margin-bottom: 12px; while another might have font-size: 18px; and margin-bottom: 14px;. That means that without any of your own CSS work, the same plain-Jane <h2>Some Subtitle</h2> code will look differently. These are the battles web developers have to face and why we hate IE for its non-standard renderings.

The purpose of the concept of a CSS reset is to put all browsers on an even playing field before you begin to style the content. That is, make sure that all elements render the same on all browsers (or rather, all major browsers) so that adding your own styling will have the same effect across the spectrum of renderings. That's not to say that you won't need to make special hacks to fix inconsistent renderings *cough-IE-cough*, but a CSS reset puts you a lot closer to the end goal than where you started.

I've only tried implementing and developing CSS with the Eric Meyer CSS reset and the Yahoo reset once each, so my experience here is somewhat limited, but these are my initial impressions. While both are essentially the same technique and could be adapted to behave more like the other, I'm going to address the out-of-the-box functionality.

Eric Meyer's CSS Reset - Eric Meyer CSS Reset

This was my first attempt at using a CSS reset and you're looking at the results in this current blog theme (as of the date of this post). Meyer's method is to set all elements to be, essentially, unstyled. That is, all elements render as plain text. No bolding for <strong>, no italics for <em>, no margins for <p>, etc. The nice thing about this is that you get to style everything from the ground up. The bad thing about this is that you have to style everything from the ground up. I was excited at first, but I became increasingly frustrated with having to write quite a bit of CSS just to get elements to behave even remotely like they normally do. I understand the purpose in doing this, but it is a ton of work just to get the most basic HTML to display with standard behaviors. I eventually realized that a work-around for this would be to develop a "CSS starting point" where there are definitions for elements that just define the basic behavior.

Another downside to Meyer's method is that he simply provides the code. This didn't seem like a downside at all to me until I used Yahoo's implementation, which I will explain shortly. In fact, it never even occurred to me that there could be a better way.

Don't get me wrong. I have a tremendous amount of respect for Eric Meyer and he has done a great job putting together the code for the CSS reset. I only see the ways to improve on it after having used Yahoo's CSS reset. *Segue*

Yahoo's CSS Reset - Yahoo UI Library CSS Reset

First, let me admit my bypasses. I didn't use, or even look at, the Yahoo CSS Reset before trying Eric Meyer's because...well...I'm a Google-guy. If the link had been to the exact same content at Google, I would have not even looked at (okay, that's an exaggeration) Meyer's version. I drink the Google-flavored Kool-Aid with the left hand and the Apple-flavored Kool-Aid with the right. (There, Microsoft zealots. Are you happy? I'm an admitted zealot too, just on the other side.)

I was very impressed initially with the organization and presentation of the Yahoo page. The code was very readable and the instructions were clear and concise. They also provide a cheat sheet (PDF download), an SDK download, and several other tools and examples that I found very helpful and interesting.

Yahoo also provides a hosted file for the CSS reset so you can simply call the include from their server in the head of your HTML. This was a nice feature. One less file to maintain and serve.

Additionally, and this was the biggest selling-point for me, Yahoo provided the "CSS starting point" code that I was looking for to get the elements to their minimal display characteristics and, like the CSS reset, they also provided a hosted file for me to include. After adding two lines of meta code in the head of my HTML file, I had reset the CSS to zero and then styled it to a standard display. Perfect! Just what I was looking for and here it was in an easy to consume, highly supported codebase.

Coming Soon...

Google CSS Library - Google Blueprint CSS Framework

As I was writing about being a Google zealot and wishing that Google had a CSS reset, I decided to search for "google css reset" and, lo and behold, the very first link that Google returned (imagine that!) was for the Google Blueprint CSS Framework, which includes a CSS reset and starting point styling. I should have known that Google would swoop in and save the day. I'll try the Google CSS reset for my next site and report my findings.

EDIT:

I recently tried validating some CSS that I added to a site after using the Yahoo CSS reset. I was sad to find out that it doesn't validate. I think I read somewhere that the Eric Meyer CSS reset doesn't validate either. I decided to punt on this one and just make sure that my personal CSS code that I built on top of the reset code will validate, but then, technically, my whole page doesn't validate since I'm using the CSS reset. I guess that's something I'll have to wrestle with until a better solution comes along.

Category: 

Comments

Css blue print reset is based on eric meyers reset. So its a not a 'google' reset

As it was pointed out, the Blueprint CSS Framework is hosted at Google Code, which is sort of an open source repository, but that doesn't mean it's developed by Google's engineers.

Those are both good points. As I said, I haven't checked it out yet. I just briefly looked at the page.

We're going to have problems in this world when people think that Google is the end all and be all of everything web-related. They have a right to exist and to do their business but much of what they offer is copied from other, pre-existing services and if we web users give them all power then it won't be too long before we complain that they have too much power and we'll sit around wondering how it happened. Personally I love Yahoo's start page and I check it several times a day and I use their reset CSS but sometimes blend it with Eric's. I do use Google's blogger tool and the ie-7.js script hosted on their servers but, yes, I'm wary about making all things Google. We all should be. I do use some of their stuff and I do use some of Yahoo's stuff and I also use things from other providers just to mix things up a little. In short, sometimes you just need to take your Google goggles off.

I will hand it to Google for hypnotizing the whole planet into thinking nobody exists on the planet except for Google even when it's of no particular benefit to the people for the people to think that.

I've been very impressed by the YUI toolset, i was surprised Yahoo developed this because well, like most web developers, i've come to expect this from Google Team (i.e. google docs rocked my world).

But Kudos to the Yahoo Team, because they've offered an entire suite of support files that are well-documented like you said, numerous operational examples, and seem to be digging really deep. For example, they're YUI Rich Text Editor has a Drupal implementation which is amazing, because let's face it, they have the resources to make their WYSIWIG editor top-notch and maintain it too.

Don't forget to check 960.gs

@Anon 960.gs uses Meyer's reset and it's own text.css as 'starting point'.

The YUI reset doesnt validate at all..eric meyer for the win

Add new comment

You can optionally provide your email address, which will remain private, if you wish to be contacted directly about this comment.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.