Grow your CSS skills. Land your dream job.

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

Published by Chris Coyier

poll-css-reset.png

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.

Comments

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

  2. Added.

  3. Brent
    Permalink to comment#

    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.

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

  5. Edwin
    Permalink to comment#

    I never heard of a css-reset before….

  6. Permalink to comment#

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

  7. Permalink to comment#

    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

  8. Anders
    Permalink to comment#

    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…

  9. Permalink to comment#

    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. :)

  10. Dominic
    Permalink to comment#

    @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/

  11. Chad
    Permalink to comment#

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

  12. Permalink to comment#

    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.

  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/

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

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

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

  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.

  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!

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

  20. Chris
    Permalink to comment#

    I’m a bit of a noob… Can someone explain exactly what a reset is? Does it override browser defaults that otherwise make styling a pain? I’m reluctant to use it since I’ve very little clue as to it’s use and I’m afraid I’m missing something beneficial.

  21. ftcbr
    Permalink to comment#

    I start with the condensed version of Meyer Reset. Normally I remove or tweak something.

    Chris, reset is very much reset (border, padding, etc.). User agents — manly browsers, but not only — have lots of properties like these set by default. It about get rid of it and start from scratch. It is crucial to maintain digital documents consistent across different user agents.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".