To Reset or Not Reset — That’s the CSS Question

Contributing Editor

Every web browser uses a base stylesheet. It ensures HTML is rendered reasonably well when you don’t provide custom CSS. You know the kind of thing: blue for unvisited links, purple for visited links, bold for strong tags, larger text for h1 titles etc. Unfortunately, vendors love making our lives complicated and each browser uses a different base. So how can you ensure your custom CSS is not affected by a default style implemented on a specific device?

Enter CSS resets. These strip most styles so elements are rendered consistently across browsers. Typically, all fonts and line heights revert to 100%, margins and padding are set to 0px, borders are removed, and ordered/unordered lists become unstyled.

Eric Meyer’s CSS Reset was one of the first and is the most well known and used. The HTML5 Reset Stylesheet from HTML5 doctor can also help style newer elements. There are several others — CSSReset.com provides a great selection and documentation.

Do you use a CSS reset? Should you?

I’ve looked at a random collection of 30 websites and the majority used a CSS reset. The advantages are clear:

  1. They provide a blank canvas; any styles applied are (almost) certain to be your own.
  2. Development can be more logical: you’re adding styles rather than removing or modifying them.
  3. Browser compatibility issues can be minimized.

Despite these advantages, I don’t use CSS resets. Actually, that’s not quite true — I often use the basic margin and padding reset because the default values are rarely useful:


* { padding: 0; margin: 0; }

This affects every tag and some developers will tell you it causes havoc or slower CSS processing. I’m yet to encounter a situation where it’s become problematical.

My main issues with CSS resets are:

Additional page weight
Most CSS resets add around 2Kb of code (uncompressed). That may not sound much but it’s a large overhead when the majority of my CSS files rarely exceed 10Kb.

Additional effort
A CSS reset requires you to re-style all your elements — which adds further weight to your file. Sometimes though, I’m happy with the browser’s defaults. Font weights, line heights, link outlines, bullet discs and other styles are often fine. If they’re not, I’ll change them accordingly.

Different browsers render pages differently
No two browsers are the same yet some people expect pixel-perfect rendering across all devices. CSS resets often give the impression that this goal is achievable. It’s not.

Personally, I don’t mind if titles in Firefox are 2px larger than IE or Opera’s idea of ‘bold’ is slightly heavier than Chrome’s. A CSS reset will never resolve those issues for you.

They don’t negate the need for browser testing
I’m not convinced CSS resets aid browser consistency. You must test your site or application in as many devices as possible so you can address errors and bugs caused by your code or the browser.

They don’t fit with my workflow
I’m not a fan of CSS frameworks. I rarely encounter situations where a generic CSS approach applies to the site being built. I may copy a few code snippets from elsewhere but, in general, I prefer to start with an empty file. It remains my code and I know exactly where to go when bugs arise.

Although it’s not as complex, a CSS reset is a framework which can introduce unexpected results.

They don’t save time
Has a CSS reset ever saved you hours of development time?

Before I’m attacked by an angry mob of CSS reset fans, I’m not saying you should never use them. They may they work for you and that’s fine. I suspect they’re also useful to those who are new to web development. However, are you adding a CSS reset because it’s genuinely useful or has it become a development habit?

As a test, try removing the reset styles from your website to see if it makes a significant difference.

Do you use CSS resets? Have you recently adopted or dropped the practice? Do they help?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • fvsch

    I use a base stylesheet. It’s a bit like a CSS Reset, but the goal is to correct a few inconsistencies and provide useful basic styles, rather than removing default styles altogether. My base stylesheet is documented here (along with some criticism of CSS Resets): http://covertprestige.info/css/base-stylesheet/

    But in practice I find that it’s a bit long and most sites end up using half or a third of what I’ve included in that base stylesheet. At some point I’ll probably write a greatly reduced version, targeting a set of styles that can be read in one minute and a 1kb footprint.

  • johan

    Very well said. CSS resets can be useful, especially with re-designs and applications, but developers can also target resets, it doesn’t have to be *. Overall resets can cost time in high volume bespoke devs but if needed, I have no hesitation in using them.

  • @habibgul

    Reset, but not with star selector! I use Eric Meyer’s reset and have tweaked it to fit with my workflow.

  • Jennifer

    I didn’t even know about resets until a couple of years ago, but now I don’t know how I’ve lived without them! The one I usually use is the simple “* {padding:0; margin:0;}” and it’s never caused me any grief. An web developer I used to work with (that has about 10 yrs professional experience) saw that I was using that and she went on and on about how bad it is to use that one… So I’m happy I’m not the only one, I was beginning to second-guess myself.

    • Russ Weakley

      @Jennifer, you should be careful using the universal selector as it is known to be the most taxing selector for browsers to have to deal with. Basically, the browser has to check EVERY element in the page before loading. Other CSS resets are less intense.

  • Rob M

    I believe in a hybrid system myself. The idea of the reset “to baseline all browsers” is a good one when you finish the statement “to my standards”.

    A good example is most resets turn UL’s into unstyled items. That is just wrong. If in my CMS I want to create a bullet list, I have to specifically style it and if the users of my CMS don’t know the right CSS class to use and know to use the class in the first place, they get frustrated because their bullets don’t show up. Sure I’m using UL’s all over the place and I don’t want bullets (navigation etc.) The point is its better to baseline your UL’s to be a disc based inside list style. Then if I don’t want them on my navigation or images I feed my jquery cycle plugin, I’ll turn them off where I don’t need them.

    The point is the base tags should have a base look for when they are used without any classes that behave the way users expect.

    Also with resets, we turn around and take the stock reset, then immediately override the reset. That’s what adds page weight. We should take the stock reset, and build out our base styles from the reset, not come long later and override the reset.

    But for the most part, we are lazy and its too easy to drop a reset in the patch later.

  • Maria Lucena

    I do use them, and I will test leaving them out. I feel the same way about the unnecessary weight put on the file, and I still reset elements as I add them to my page. Why reset for something is not even in the markup? I prefer to start with a blank file as well (I usually add the resets later because it has become a habit).

    Good when I’m a freelancer, and I love hearing about small things like this, it makes a difference in your daily work
    Thanks

  • Ove Klykken

    I use my own little CSS ‘framework’, but honestly, something like * { padding: 0; margin: 0; } just seems to create more work.

  • Nick

    I have always used resets. I can’t say that they have saved an otherwise nightmare of a project or anything like that but having my software preload the reset into my styles, I’ve never lost time.

    There have been times when not difference was noticed with or without the rest and other times where it did make a big difference. I’ll probably keep using it, until it becomes counter cost-effective.

  • Ben

    I have been actually thinking a lot about this lately. With browsers where they are, I think they are a good bit more consistent than in the past. Either way, I hate resetting everything to zero just to start over.

  • Shadow Caster

    While resets are quite useful, sometimes you want to emulate the default style of your favourite browser (FF) in all other browsers For example, once I reset the p tag, what padding/margins styles do I use to make it look as if I hadn’t reset it in FF?

    Is there a resource somewhere that has a guide to making/emulating the original styles of different browsers?

  • Richard

    Interesting. I generally don’t, and just reset what I need to e.g. fieldset usually requires border: 0. For most elements they’re so fundamental to a custom style anyway that there’s no need for a reset e.g. lists, headings, basic text elements, images. I do find Eric Meyer’s reset a useful reference when working out what needs to be overridden though.

  • Antonio Kobashikawa Carrasco

    Thank you for your article.
    I think that, as other techniques, it is better to use CSS reset technique for a reason and not just for habit.
    I use it when I require an almost exact correspondence of the design in different browsers.
    About the use of frameworks, in general, I think it is natural for *one* person feel it take longer time than usual or feel less control over their craft. The benefits of frameworks are noticeable for more than one person working together, or when you have to support work of another developer or for oneself some time later.

  • York

    Well said. I have been using * {margin:0;padding:0;} for years and over thousands of websites literally. Never had a problem caused by this. 2kb for a reset is out of the question and takes much more code to ‘fix’.

  • Peter

    I am little hesitant to be the first to weigh in here, but I agree. I find using css reset code to be a bigger pain than it is worth. I find I generally have to re-code a lot of styles back in that I just stripped out when the defaults were pretty good to begin with.

    I also agree that browsers rendering engines are still all over the map and designing with some flexibility will save a lot of headache and let give you work longer life spans.

    I can see how some designers feel they need to control everything with as much precision as possible, but as a web designer we work in a fluid canvas that changes from browser to browser and version to version.

  • Michal Konvalinka

    Hi,
    I’m a web application developer with about 10 years of experience in webdesign and web application field, my friend is a webdeveloper, more client-side oriented than me and both of us reset CSS.
    I adopted it after I found it usefull for many reasons. I will go trough your list of cons and make them pros or at least make them not cons.
    Additional page weight – 2kb, uncompressed. It’s nothing. It’s almost always compressed (gzip, server side, decoded in browser automatically) and it’s cached until it’s changed. Every page (or image) or the whole content downloaded for displaying the page is much more bigger.
    Additional effort – it takes more effort to hand-pick and reset some elements like different heading sizes etc when you don’t need it pixel-perfect but need a similar size for obvious reason.
    Different browsers render pages almost identically. Try it. Last simple webdesign I made using reset.css looked, believe it or not, pixel perfect in all major browsers. IE, FF, Chrome, Opera. Without extra effort. Just set the values you need and they’re same in all browsers. Try it.
    They fit in workflow – I’m not a fan of CSS frameworks either. You don’t have to use CSS frameworks. Just pick one reset.css (1kb), you can try boilerplate css, take just the reset.css and you’re done. Small and simple file. http://www.google.com/search?q=boilerplate+css
    They save time. As I wrote above, you don’t have to check your webpage in all major browsers to find out that heading in one of them is twice as large as in other browser and therefore the heading is unintentionally wrapped to a second line. In this case without reset.css you have to test it in browsers, find it and fix it. Which takes time.
    Oh, and my friend, uses HTML5 boilerplate now. http://html5boilerplate.com/ You may have reasons not using reset.css or boilerplates. Maybe because you don’t like CSS frameworks. It’s completely up to you, everybody likes tools and techniques which fit (personally) to him. Same for me. To be honest, your approach seems to me like a step back.
    I just tried your test – disable reset.css on one of my websites. It looks almost the same with and without it. The difference is – when reset.css is enabled, it looks same in all browsers. That’s the point about reset.css (for price of 1kb)

  • deathshadow

    The key to a good reset is to ONLY reset the values that are inconsistent cross browser — that’s what a reset is FOR… and YES, the one I use does save me time on development and are part of why most of my pages work all the way back to IE 5.5 with little to no extra effort and even IE 5.0 works in most cases. (and why I laugh at the pathetic losers deploying html 3.2 with a html 4 tranny or html 5 doctype on it with sixteen tag opens before it even hits content with hundred+ validation errors, no reset and classes/ID’s on EVERYTHING with nothing resembling semantics, wondering why their page doesn’t work in IE or even anything other than their beloved firefox)

    The problem comes when you get into fat bloated pigs like Meyer’s “reset reloaded” that reset elements nobody uses because they can’t be trusted cross browser, sets up values that you are likely to just re-assign anyways (font-size on headings for example) and a bunch of other pointless garbage that’s a waste of bandwidth and in my experience makes MORE work.

    Which is why the reset I use:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    margin:0;
    padding:0;
    }

    img,fieldset {
    border:none;
    }

    Is pretty darned simple and small. 252 bytes is NOT going to break the bank on your CSS size… and if that much code is REALLY an issue… well, it’s like that white-space stripping nonsense — an indication of piss-poor markup and uselessly redundant CSS.

    After all there’s minimalism, and then there’s shooting yourself in the foot with it.

  • w2ttsy

    I use a stripped down version of Eric Meyers’ sheet and its main goal is to remove the unwanted default CSS attributes. Its less work to unset the most commonly used selectors, than the reset them each time a new rule is created.

    For example a Heading tag has default font size, line height, margins and padding and they either vary between browsers (font size), or the margins arent needed in my design. Rather than have to reset margins and padding each time i declare a h tag, I start with a reset version and only style up the parts I need.

    Another example is form being set to inline, fieldsets having borders stripped, img, object, embed set to block (to fix the Firefox 3px jog), anchor tags that contain images no longer have borders.

    body { margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; font-size: 0.7em, color: #000; background: #fff; }

    img, embed, object { display: block; }

    a img { border: 0; }

    h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; line-height: 1em; font-size: 100%; }

    p { margin: 0 0 1em 0; }

    form { display: inline; }
    fieldset { border: 0; display: block; }
    label { cursor: pointer }
    input, select, textarea { outline: 0; }

  • Drew

    Tired discussion is incredibly tired. Struggling to meet a quota?

  • stefan

    wrong in so many ways…i don’t use a css framework either but my gosh, when i started with the css reset some years ago it really changed things :) combined with html strict mode (or, more recently with the html 5 doctype) makes things very “even” and, indeed, with very little adjustments working all the way back to IE5.5

    • deathshadow

      Given that HTML 5 is the antithesis of STRICT (adding redundant tags and loosening up the rules to the point it makes 3.2 look sane), I’d be interested where that “more recently” bit came from.

  • deathshadow

    Oh, BTW — You mention frameworks in the article, and indeed CSS frameworks are universally total rubbish that by definition usually rely on presentational markup by way of presentational classes – and that’s where MOST resets turn into trash, as they are big enough to qualify as a framework.

    The one I posted above nulls margins on a handful of elements, strips borders off elements that do not have consistent border behaviors cross browser, and that’s IT. That’s not a framework, that’s a reset… that has never “introduced” a single unexpected behavior.

    The “reset reloaded” crap — that’s a framework… that often introduces unexpected behaviors.

    It’s not “to reset or not to reset”, it’s “don’t blow 1-3k on setting things that have NOTHING to do with being a reset” in your reset.

  • kaf

    I agree with this articles reasoning. The full-on resets from Eric Myers are a bit of overkill to me. Only the padding and margin resets are really needed. That said though, I usually specify which tags I am resetting instead of using the * selector.

    • deathshadow

      .. and how do you deal with how the universal selector (*) shtups form elements?

  • Lee

    I use my own custom CSS Reset. Some of the ones made widely available are developed to cater for everybody’s needs which bloats them. I also find it allows me to add consistent spacing and sizing in my page. For example the following rule:

    h1, h2, h3, p, fieldset {
    margin: 1em 0;
    }

    Makes my life alot easier as i don’t have to fiddle around with the spacing in my content.

  • AdamT

    The global *{padding:0;margin:0;} reset can have unforseen issues.

    Specifically, it can do odd things to the appearance of form elements, especialy in good old IE. Be wary.

  • John Faulds

    I used to use a reset but found that as I explicitly declare margins and padding for everything anyway and never use browser defaults, that it no longer served a purpose.

  • Vlad

    Hi,

    I’ve been using CSS reset for some time now. At first I used * {padding: 0; margin: 0;} but this one is in general almost useless. Created more problems than it solved.

    I ended up using Meyer’s reset and yes, it DOES save me about 50% o development time. I compared it on two similar (size, structure) projects where one used CSS reset and one did not.

    Despite this fact, I am not saying, that you should blindly follow the CSS reset crowd. In order to use CSS reset advantages, you actually need to know how it behaves and what exactly does it do. If you just copy paste something, you will end up with messy code. Also, if you have time, develop your own CSS reset or even framework. It will suit your coding style the best.

    • http://www.optimalworks.net/ Craig Buckler

      Seriously? A CSS reset has halved your development time? Is that really the case or is it that you’ve become a more proficient CSS coder?

  • PatrickSamphire

    I think one of the keys with resets, as with the HTML5 boilerplate and other ‘starting points’ is to strip out anything and everything you aren’t going to need right at the beginning. In my experience, it’s easier to strip out unwanted stuff than to try to remember and compile key tricks and defaults from scratch each time.

    I suspect that even people who don’t use a reset explicitly in fact have a ‘mental reset’ where they repeat certain tricks every time in order to smooth out browser differences.

    Where resets and so on go wrong are where they are used without thought and without taking note of what they are doing. When I was still a bit of a newbie, I used to do that, and it did produce unnecessary bloat, but now I actually know what I’m doing, a reset is more of a set of useful remembers to start a process from.

  • Alex

    I aim for speed in web pages loading I feel the more weight a page has the longer it will take to load. The only actual “Reset” I just is the
    *{padding:0px;margin:0px;} – like stated earlier in the post. It’s just always worked for me and now that kind of “reset” has become a habit. It’s the first thing I do when I make a css stylesheet.

  • Matt Wistrand

    We use a base stylesheet for our sites, since we have several elements that are consistently styled across our various sites. But for the most part, this has proven to be a tremendous pain. More often than not, I’m overriding styles from this base stylesheet and wishing I could either redo this stylesheet or start again from scratch.

  • jerichvc

    no.
    css reset is overkill.

  • The Schaef

    Web Standards compliance doesn’t save time or guarantee browser consistency, either, but I still close my tags.

    Qualifying my statement by noting that normally, I only reset margin and padding, and specifically to body, h1, h2, h3, h4, p, ul and li, I think good practices are a good way to achieve a clean, consistent result (as much as we are able), which has a value apart from the development time its exclusion may save.

  • Lucas Rolff

    I liked this post.. I’ve been considering if I should start using CSS-resets, because so many other peoples does and they say it’s a huge time-server..

    My choice was not to use it.. Because.. Often I use many of the styles that is “standard”.. Yeah.. Maybe there’s 1-2 px difference from browser to browser.. And if there is some buggy stuff that doesn’t look great.. I solve it..

    Is it a time-saver?

    No in my opinion it isn’t.. Because maybe u don’t need to “reset” the styles.. But you need to “reset” them to that you want.. every single style need to be styled if you need it tho.. aka, often I think.. For making a site looking “better” you often spend much more time.. I don’t use it.. And I don’t think I ever will do.. – only CSS-reset I use body { padding: 0; margin: 0; }

  • Anonymous

    Another interesting point, I think, is that certain users seem to prefer certain browsers because their default “look and feel” happens to appeal to them, which is an individual preference. I’m all for building competent, valid web pages, but does every web page need to look exactly the same in every browser, right down to every last pixel?

    Now, obviously when your layout breaks from one browser to another, then you’ve got a problem. But if a minimal difference in header size or paragraph padding happens to float a particular user’s boat, why not let them have it?

  • Rob Henrichon

    I think Eric Meyers best sums this all up in his original remarks on using a CSS Reset. Basically, that a one size DOES NOT FIT ALL. See last line in his comment below:
    /* CSS Tools: Eric Meyer’s Reset CSS
    http://meyerweb.com/eric/tools/css/reset/
    The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.
    In other words, this is a starting point, not a self-contained black box of no-touchiness.
    */

  • neil

    I only reset headings, body and divs .

    I then set up a reset class for padding and margin and apply it where needed, dont know if thats the best thing but works for me.

  • http://www.wpversions.com Paul G.

    There’s the Twitter Bootstrap CSS to consider. Perhaps not a reset as such, because it goes way beyond just resetting.

    It’s really very good though. Worth checking out I feel.

    There’s also a great plugin for WordPress that lets you add it to the very beginning of your WordPress site, regardless of your theme: http://bit.ly/r9BC0h

    Cheers!
    Paul.