New Poll: What Kind of CSS Reset Do You Use?

By: Chris Coyier on February 20th, 2008 — Posted in: Opinion

Different browsers have different default settings for page elements. In an effort to keep web pages looking as consistent as possible between browsers, many web designers use what is commonly referred to as a CSS reset to wipe away these default settings and start fresh.

Margin and padding are the most common things to reset as they commonly cause layout problems if not reset. This also gives you the opportunity to “work forwards” with your margin/padding. This means applying margin/padding only to elements which need it instead of removing it from elements that don’t. This can often makes more sense for designers and can lead to trimmer code. Border is another popular thing to reset as it can take care of problems with those pesky borders around linked images. This can cause problems with borking* default styling for things like submit buttons that you didn’t intend to bork.

Eric Meyer offers a popular reset and the star selector reset also enjoys some popularity. Both of these styles have their advocates and critics.

So how about it folks: What kind of CSS Reset Do You Use?

Do you use one of the popular ones? Have one of your own design? Do you use one at all? The voting widget is down in the sidebar as usual (RSS readers will have to make the jump to vote, still haven’t figured that one out).

*Official term for screwing something up with CSS that you didn’t intend to.

Theoretically Related Articles:

Discussion Elsewhere

mStudiosTALK | CSS Tools: Reset CSS — February 29, 2008

Responses

1

How about adding the YUI or Blueprint reset to the poll?

Comment by Colin Scroggins — February 20, 2008 @ 4:38 pm
2

Added.

Comment by Chris Coyier — February 20, 2008 @ 4:39 pm
3

I’m trying to get back in the swing of things after not coding for quite some time. I was a hack then, and not much better now, though you’ve been a nice source of needed info for me.

After being put into action on a family member’s business site, I was bugging out over I.E. problems (what’s new). I came upon the “Hard Reset” solution and was floored by how almost everything snapped into place; amazing! After further reading and a hope to see even further magical “snapping”, I came upon Eric’s reset and am working with that. I didn’t notice any additional effects when I switched out resets, but I think there are probably some benefits that I haven’t noticed, or will reap, as I develop the entire site.

Thanks for the excellent blog, by the way.

Comment by Brent — February 20, 2008 @ 6:45 pm
4

For the most part I am using my own, but I just tried the blueprint Typographic file and it really made life easier.

Comment by Benjamin Sterling — February 20, 2008 @ 8:20 pm
5

I never heard of a css-reset before….

Comment by Edwin — February 21, 2008 @ 12:00 am
6

I settled with Eric Meyer’s CSS Reset and it works quite well.

Comment by Patrick — February 21, 2008 @ 12:50 am
7

I used to use a hard reset which included

body * {margin:0;padding:0}

But when you come to override this style you end up having to refer to the body again to change what you set, you may have also noticed that CSS hacks have a similar effect on the cascade

Comment by Matt Smith — February 21, 2008 @ 1:05 am
8

I’m using Eric Meyer’s reset styles. I was a bit skeptical at first, mainly because I didn’t really see the use for it. However I gave it a try and I can tell you it truly cuts down on production time…

Comment by Anders — February 21, 2008 @ 2:22 am
9

i only reset the parts that need to be reset, all those css frameworks have to much lines or css that i dont even use… which means bigger file.. longer loading.

Comment by V1 — February 21, 2008 @ 4:56 am
10

@Colin & Chris: the Blueprint framework uses Meyer’s reset … so no need to add it to the poll

see: http://meyerweb.com/eric/tools/css/reset/

Comment by Dominic — February 21, 2008 @ 7:07 am
11

You can’t go wrong with the latest Meyer’s reset.

Comment by Chad — February 21, 2008 @ 9:16 pm
12

I prefer to use one of Meyer’s resets (his Reset-page: http://meyerweb.com/eric/tools/css/reset/). Preferably the latest one, with some small adjustments. There are elements that I don’t use on a regulary basis or due to DTD restrictions, such as: strike, var, center, samp, address and del. Although I see uses for alot of them, I don’t need them as much as the rest.

Comment by koew — February 22, 2008 @ 8:19 am
13

I have my own reset.css file, which I got some flack for. As much as ‘*’ may not be “best practice”, it always works.

http://davidwalsh.name/advanced-css-using-a-resetcss-file-to-gain-complete-control/

Comment by David Walsh — February 22, 2008 @ 12:00 pm
14

Eric Meyer’s original reset. I have yet to update to his latest version.

Comment by Adrian Turner — February 23, 2008 @ 11:54 am
15

I am still skeptical about using all this extra code for resetting css resets…

Comment by Jermayn Parker — February 25, 2008 @ 5:50 pm
16

I only reset when needed. As I’ll probably set my own properties to most elements, I often find resetting useless.

Comment by Thibaut Allender — February 27, 2008 @ 1:56 am
17

* has proven very useful for general margin and padding resetting, but I also like to ensure tables and img being taken care off. depending on project it gets more involved - meyer’s reset of course is a great one but often more than I currently need.

Comment by Marlyse Comte — February 28, 2008 @ 10:46 pm
18

Interesting question.. I tend to use a variation of the Meyer reset, but also use others depending on the design. Perishable Press has a great collection of popular CSS reset styles. Lots of choices, including the Meyer reset. Cheers!

Comment by August Klotz — March 2, 2008 @ 8:50 am
19

Thanks for that link August! I hadn’t seen that before, I’ll mention it in the poll results post later this week.

Comment by Chris Coyier — March 3, 2008 @ 3:17 pm