Why “Reset” Style Sheets Are Bad

Published on April 19, 2008 (↻ February 5, 2024), filed under Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

This post is not as clear as it could be. Of later reset critiques a Google+ post probably sums it up best. If you’re looking to learn when a website uses a reset, check out the Reset Style Sheet Highlighter Chrome extension.

Jonathan set the pace, Eric countered, a few people chimed in, and I, having criticized reset and undo style sheet criticism back in January, feel obligated to repeat that reset style sheets are bad: A novice should not use them, an expert would not use them.

Disadvantages

Since I didn’t plan to discuss resets right this very evening, I didn’t invite any numbers for dinner—the stats I had on my mind need more time to retrieve. There are a few issues with CSS resets like Eric’s or Yahoo’s:

First, resets usually get overwritten, meaning that people have this body { line-height: 1; } rule in their imported reset style sheet and don’t change it to what they need but instead add another high-level line-height declaration on top. You may argue that this is intended, but that doesn’t make overwriting author declarations by author declarations any more efficient.
Consequently, reset styles unnecessarily add load time, while…
…some developers regularly not only forget code style and performance, but also users. For example, Eric resets the outline property, but this outline property is still useful for keyboard navigation. You have to keep this in mind when working with resets.
(A side argument is that a truly complete reset would need to contain even more declarations to be comprehensive, by overwriting and “normalizing” everything specified in user agent style sheets.)

Alternatives

Not using reset or undo style sheets. Even when you’re missing implementation-specific margin or padding differences, things will usually be fine.
The old * { margin: 0; padding: 0; }. Even though it costs a few µs performance, it is a solid, easy-to-remember reset rule. (I’ve been using it for more than four years.)
An “implied” or “invisible” reset that considers the markup your project actually uses as well as differences between user agent styles, to identify those declarations that need to be set specifically.

Finally, I feel like Eric: I wouldn’t have it any other way.

As noted in my site disclaimer: This is my personal website, and the views expressed on these pages are mine alone and not necessarily those of my employer or other companies and organizations.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)

Comments (Closed)

On April 19, 2008, 1:33 CEST, Markus said:
Nothing to add. Hmm, except that YUI is even less useful, anyway. It is too much most of the time and never that what you need. Sometime swriting stylesheets yourself is the best option to go. 😊
On April 19, 2008, 1:49 CEST, Eric Eggert said:
I think it’s mostly a tool belt thing. Different web designers may use different approaches for building sites from the ground up.

The question is: Am I going to learn the implementation of several default style sheet or do I want to build from one style sheet, which is the same in all browsers.

I’d really like to have the latter, so a uniform default css would help that issue.

Of course one should avoid redundancy in style sheets. I am quite sure that resetting margins and paddings is a good thing. Im convinced that all things which are adressed later on, shouldn’t be globally reseted. So font-sizes, line-heights and outlines shouldn’t.

Font size is declared directly with the element or cascaded from the body element. And you’ll define it every time you need it anyway.

On the other hand I can see Eric Meyers point about forms and that they shouldn’t reseted, if possible, because they will break. The css3 :not-selector will come in handy to exclude input elements, but that’s the future and probably there are better solutions until then.

It is important to keep the disadvantages in mind. But that is what a good front end developer does: Crafting the best he can after considering all advantages and disadvantages. If ones tool belt includes a reset style sheet, and even * {margin:0; padding:0;} is one, it’s about knowing that and all the consequences, and crafting from there.
On April 19, 2008, 2:37 CEST, johno said:
I’m certainly no expert on this topic, but I’ve always thought that the reset thing was overkill—something of a sledgehammer approach to ‘cure’ a minor ill. It’s nice to see that the experts concur.

{ margin: 0; padding: 0; } has always worked for me.
On April 19, 2008, 11:51 CEST, Martin Sarsini said:
I found that the most annoying css properties that makes things look so different from browser to browser are mainly margin and padding. Using highly semantic code, just the strictly necessary html elements, headings, paragraphs… forms, and resetting the two above css properties makes me have a pixel perfect website on most of the main web browsers. All this without writing to many lines of extra unnecessary code and without resetting useful properties.
On April 19, 2008, 19:08 CEST, Leonard Eshuis said:
what i always do is make a default setup for all my sites, including 3 stylesheet
1. reset + fixes (quotations international, clear fix)
2. preset (all the standard things you normally use . body 62.5% font-size , sizes for headings, strong, em, sub ….)
3. the actual site css

lately i use 2 extra stylesheets loaded in via conditional comments
1. ie-fix
2. ie6-fix.

also use a standardized directory stucture in which the standard stylesheets are in a different directory then the actual website stylesheet, so that switching themes is as easy as switching a couple of urls.
On April 20, 2008, 4:08 CEST, Eric Meyer said:
Interesting that you assert that nobody, from novice to expert, should use a reset style– and yet I know several people of varying skill levels, some of whom know as much about CSS and XHTML as you or me, who swear by them. I agree that they don’t fit everyone’s style (ha), but it seems to be painting with a little too broad a brush to say that they’re just plain bad for everyone.
On April 20, 2008, 5:51 CEST, Andrei Gonzales said:
It really depends on the website you are building. Sometimes there is no need to reset, sometimes there is. Sometimes you only need to reset some of the elements, sometimes you need to reset everything (except for outline of course).

I have to agree with Eric Meyer: It’s a case-to-case and dev-to-dev issue. Saying it’s “just plain bad” is far too wide a generalization.
On April 20, 2008, 6:47 CEST, Alan Gresley said:
@Eric

Interesting that you assert that nobody, from novice to expert, should use a reset style– and yet I know several people of varying skill levels, some of whom know as much about CSS and XHTML as you or me, who swear by them.

Yes I do know someone who uses CSS resets and CSS frameworks and they are part of the CSS eleven. Resets are bad.
On April 20, 2008, 9:22 CEST, pepelsbey said:
Eric took care of the outline property, but this outline property can still be useful…

But there’s warning:

/* remember to define focus styles! */ :focus { outline: 0; }
On April 20, 2008, 12:21 CEST, Jens Oliver Meiert said:
Markus, yes, though the YUI lib would even require different notes.

Eric,

Interesting that you assert that nobody, from novice to expert, should use a reset style

that is not what I said; I said that “a novice should not use them, an expert would not use them” which leaves some room for “not novice, not expert” web developers to try, experiment, and learn. (Although the disadvantages listed would not necessarily encourage that.)

Andrei, well, I cannot really see any situation where an unmodified reset (like Eric’s or YUI’s) is really useful.

Alan, I feel some passion 😊
On April 20, 2008, 18:54 CEST, Alan Gresley said:
@Jens

Alan, I feel some passion

I have enjoyed our little encounters elsewhere. I love your proposal for CSS constants. One proposal which can be considered when the CSS WG stops flip flopping over empty strings. 😊

About that universal reset for your screen CSS. Try this:
```
* { margin:0 ; padding:0 ; } /* delete */
body, html, ol, ul, li {margin:0;} /* add */
body>h1:first-child {margin-top:0;} /* add */
input, textarea { margin-bottom: .5em; width: 308px; } /* remove width */
```
Then consider what is not necessary anymore. I have some cheek. 😉
On April 22, 2008, 3:24 CEST, Ben said:
Why ‘Reset’ style sheets are bad?

Probably, and only, because of that name! I am a long time user of Eric Meyer’s base style sheet…
Yes, sorry Eric 😊 and others to change that name, but I think any of these special style sheets should be consider as the first lines of our general/base style sheet. We all have!
Talking about overkilling does only mean we did not really look inside these reset style sheets and their comments…
On April 22, 2008, 15:24 CEST, Eric Meyer said:
Ah, I see now, Jens. My apologies; it’s easy to fall into binary thinking even when trying to avoid it, and forget that there can be an implied middle. Or even middles.
On April 22, 2008, 17:02 CEST, About Webdesign said:
We tried different reset css style sheets on smaller and bigger sites. Until now we still don’t if we hate them or love them. To some extend it is a personal choice. Our goal was to find a way of styling that works for everybody at our company. We also tried some frameworks. No holy grail yet 😉
On April 22, 2008, 20:01 CEST, Jordan Clark said:
One thing I’ve noticed about this debate: the people in the “yes” camp are very tolerant to the other side of the coin, yet people who don’t agree with them are just saying, “Resets? They’re bad”.
I agree that a full-blown reset style sheet is nothing more than overkill for a 5-page brochureware site, but on a highly-designed, large-scale website, there is definitely a place for them. As I said on Jonathan’s blog, can’t we just agree to disagree on this matter? As for people saying that resets are for ‘beginners’, well, if they are good enough for Eric Meyer, they are good enough for me.
On April 23, 2008, 8:56 CEST, Chris said:
Exactly what I’ve been thinking about reset style sheets 😊

I’ve been using * { margin: 0; padding: 0; } for years … really the only “reset” you need.
On April 23, 2008, 11:52 CEST, kontur said:
We had this discussion lately at work also, and while, you can of course copy paste your reset.css into the main .css, also thinking about the amount of file-requests that is caused the widely used seperate inclusion of a reset.css might be something to point out.

I personally also like the *{} declaration and found it absolutely enought. Some resets go 30-50 lines of code to reset all the possible tag presets, but hey: as a webdesigner you should know what elements are tricky, and if you then actually use them on your site, style them like anything else.

cheers,
k.
On April 23, 2008, 16:04 CEST, Eric Ferraiuolo said:
I think one huge category of web projects which are being overlooked and the whole reset/base style-sheet makes complete sense for is web applications!

When using something like YUI or Blueprints CSS frameworks you have a nice starting point in your application to build on top of. In real-world application projects you’re working in teams, teams can benefit from using a starting point when it comes to CSS. Having these frameworks in your application allows you to do interesting things with your templates, allowing for programmability of markup with some layout already setup for you.

Also when building applications and not a web site you usually have some build process in which you can minify and aggregate your CSS into a small numbers of files to reduce your bandwidth and http-request footprint; while still reserving the segmentation for development (a huge plus!).

For any web application I will always start with a CSS and JavaScript framework!
On April 23, 2008, 17:21 CEST, Jason Grant said:
I agree that in most cases resets are more of a hinderance than help. They can also ‘kill’ some usability/accessibility aspects of documents if not used with care.
On April 23, 2008, 18:05 CEST, Alan Gresley said:
@Jordan

Your and Eric’s argument stands true when we consider IE5, IE6 and IE7 together with Opera 7~8 and less with than 9~9.27 in the equation.

Now we have 4 engines all agreeing on margins and Padding. They are Gecko 1.7~1.9, Safari 3, Opera 9.5 and IE8.

Since they all agree where margins and paddings are in the layout model, resets are no longer needed.

As I have already said to you elsewhere, your just knocking down all margins and paddings and just building them back up with extra CSS. Is this how you would build the foundation (base) for a house?
On April 25, 2008, 16:20 CEST, Buckthorn said:
I would encourage people to take a more balanced view. For example, when several developers are collaborating on style sheets—often multiple style sheets per web page, CSS resets can be very useful. I find that they can help counter inconsistent and conflicting habits and coding styles. Of course, developing consistent practices among collaborators is desirable, but it isn’t always possible. So, not everyone works in the same way, or in the same production environment. [I also think the contention about latency is overstated and needs to be put into context: compared to what? To style sheets with 500 lines, or with several large background images? There are all kinds of ways load time can be increased, but one always needs to ask: by how much and at what cost/benefit to the publisher and the audience?]
On April 29, 2008, 21:16 CEST, Maniquí said:
I’ve been using some different kinds of reset since the well-known Global Whitespace Reset, and tweaking them to my needs.

You have some valid points about performance and load time, but as Buckthorn suggests, a more balanced view is encouraged, evaluating cost and benefits for you and your clients (and, ultimately, your visitors, although I don’t see how all this CSS reset could matter to them).

Also, you have a point about resets being created for uniformity and consistency, but at the same time, not doing a totally-ultimate-every declaration/element reset.
But that same argument can be used for those who doesn’t use resets and leave some styles declarations to the browser default.
What would happen (yeah, I know, it won’t happen) if tomorrow a browser vendor decides that background-color default is red, line-height is 20 and images have border by default and you haven’t reset those styles anywhere?
(I doubt I’m making a point here, but let’s see if someone comes with something clever than me)

Regarding the ye-old * {padding:0;margin:0;}: it’s a reset. So, if resets are bad, this one is too. I ‘ve read this (and any) reset could increase performance times regarding HTML rendering, by undoing-redoing things (but no solid arguments in the linked article).

Regarding the article title, I think it’s a bit extreme to claim resets are bads.
Once again, Eric Meyer give some enlightments about this kind of statements in articles: Considered harmful

I would consider myself an now-old-begginer almost-expert CSS designer and I want to add some tools to my belt. After taking a look to some resets (just a look, not having test/implemented most of them), I liked the approach of Tripoli - a CSS standard for HTML rendering. It’s a reset+generic stylesheet combo, and I like what I’ve seen so far. I’m currently trying to implement it in a project.

And, finally, as you point, people don’t read on the web, and it seems you haven’t read a comment , nor the comment on Eric’s reset stylesheet.

Thanks for this article and for other articles I’ve been reading here. High-quality stuff!
On May 1, 2008, 20:23 CEST, Adam said:
I thank go for Eric’s idea on reset sheet idea. It works wonders with all browsers acting somewhat the same. Maybe if you are doing simple layouts such as this then ok do not use them.
When my sites are finished, they render on IE6-6, Firefox, Safari, and my N-95 phone.
I looked at your style sheets. I do not see the difference between one reset sheet and and a stylesheet for layout but your stylesheets? The first bit looks like sections out of a reset sheet. Pretty simple layout here. So I am guessing a reset sheet then the styles after would be the same size.
Maybe you should concentrate your skills on Web Dev then opinions..
On May 22, 2008, 12:38 CEST, Jonas said:
Quite late to comment on this, but, if you are a webdesigner you want your websites to look exactly the same on either browser.

Therefore you compare user agent stylesheets between browsers and you make your own reset-theme which makes a solid base.

For instance, see the difference in legend and hr between firefox/explorer.

I think it’s a mistake not recognizing reset sheets for what they are. I hope that the browsers someday could unite under a clean css that did not cause extrawork for use designers.
On May 30, 2008, 3:42 CEST, Alan Gresley said:
@Maniquí

What would happen (yeah, I know, it won’t happen) if tomorrow a browser vendor decides that background-color default is red, line-height is 20 and images have border by default and you haven’t reset those styles anywhere?

Do you think that would happen?

@Jonas

I think it’s a mistake not recognizing reset sheets for what they are. I hope that the browsers someday could unite under a clean css that did not cause extrawork for use designers.

There has been discussion about the UA CSS2.1 Style sheet defaults on the CSS WG list. This table still show wrong since IE8b shows vertical margins of 1.2em or 1.25em on block elements. Note the difference defaults on the list. IE8b now follow the other browsers.
On June 1, 2008, 5:50 CEST, sparkybarkalot said:
Your list of disadvantages are only disadvantages if resets are being used incorrectly. If you’re overwriting author declarations with author declarations, then as a developer you’re not paying attention. That’s not a problem with resets, it’s a different problem altogether. It’s analogous to arguing that one should not use valid (X)HTML because eventually someone working on the site is not going to close an image tag anyway.

Secondly, there’s a great advantage to using resets, which is that I as a developer spend less time, and therefore less of my clients’ money, trying to debug certain display issues. A good reset CSS file will smooth out the discrepancies between browsers, which is quite a good thing in my opinion.

Resets have resulted in better websites for me, outweighing any perceived or actual disadvantages.
On June 1, 2008, 12:56 CEST, Jens Oliver Meiert said:
Jonas, more or less identical default styling is certainly something we appreciate, similar to our greatest desire, proper CSS implementations…

sparkybarkalot,

Your list of disadvantages are only disadvantages if resets are being used incorrectly.

I do not disagree. Unfortunately, observe the use of resets and you’ll notice that they are in fact used incorrectly most of the time. (I’m happy to stand corrected.)
On June 5, 2008, 22:22 CEST, Dave Nicoll said:
Sorry, I’m going to come and out and say what I’m thinking - you anti-reset guys are full of it.

Firstly, if reset CSS helps a designer or developer achieve a consistent approach across the board, brilliant. But yeah, you may have a point about load times - oh wait, this isn’t 1988 and nobody uses dial-up anymore! 1 reset CSS file < most images. Duh.

Secondly, * { padding:0;magin:0; } does NOT always cut it. Just look at how form elements behave across browsers.

Thirdly, do none of you have deadlines? Or families? Or interests away from staring at your computer, chained to a desk/coffee shop/studio? When designing for the masses, you need to get it right across the board - without fail. Reset style sheets are great for a solid base and quickly putting together designs that work.

Did I miss the point of this? I don’t think so. But until all the browsers behave the same, this is a popular solution for a reason.
On June 9, 2008, 19:46 CEST, Jens Oliver Meiert said:
Dave, watch your language.
On December 10, 2008, 23:56 CET, randomCommenter said:
Wouldn’t a well written base style sheet render a reset style sheet redundant and therefore useless?
On December 11, 2008, 21:38 CET, Gabriel said:
I know this discussion has been dead for quite a while but I thought I would put in my 2-cents anyway.

From all that I am reading here and on other sites my conclusion would be that resets can be a good tool. However, I don’t think there is such a thing as a generic reset.css that can be used everywhere. A reset, IMO, should be site specific and set all the base tags to the default for that site.
On April 25, 2009, 10:10 CEST, weeplisee said:
emm.. bookmarked 😊
On May 21, 2009, 1:23 CEST, Ben Truyman said:
Although this post is over a year old I’d like to weigh in on your three main arguments Jens.

“The reset styles are often overridden.”
Yes, of course if we apply a zero margin/padding to most elements, we’re probably going to override some of them eventually. But the point is to start from a level ground. Why do construction workers flatten their base before building a skyscraper? Sure maybe they’ll need the foundation to be higher in some areas at another point in the project, but it’s just easier to start with a consistent (across all browsers) foundation. The YUI reset only contains about 16 -18 style declarations, 10 of which I consistently use. So there’s not a lot going on that I don’t know about.

“Reset styles add unnecessary load time”
Are you kidding me? Eric Meyers’ reset stylesheet minified/g-zipped comes in at 0.5k. I think our dial-up users would be fine with that. And if one is really concerned about HTTP requests, include the reset in a globally used stylesheet—done. If it’s regard to the browser’s screen painting performance, you should slap yourself on the wrist for suggesting to use the universal selector to remove margin/padding from all elements. I’m not the only one that disagrees with this practice, Mozilla does too.

“Eric’s reset stylesheet removes the :focus outline style from all elements”
Then remove that style declaration if it’s a concern. It should also be noted that Eric even says in his reset stylesheet to “remember to define focus styles!”.
On July 31, 2009, 13:47 CEST, rolfen said:
You dont have to keep reset stylesheets.
You can use them during design, then swith to margin and padding 0 for production.
On August 24, 2009, 21:25 CEST, Daryn St. Pierre said:
I’m a bit late but I have to agree and disagree with this. I personally use Eric’s Reset Reloaded on every website I build and tend to comment out certain items that I find to be needless for the project at hand. I’ve actually taken his Reset Reloaded and condensed it down as to not use so much white space.

I think it’s a little too broad to say that it’s bad practice for anyone to use. I use it while knowing exactly why, as opposed to blindly implementing it because some professional said it’s good practice. It sets a level playing field for the project at hand and allows me to easily manipulate every element to my liking. On top of the CSS reset I tend to use a group of default styles for things like lists, blockquotes, etc. Maybe to some this isn’t their workflow of choice but for me and numerous other professionals that I know, it has served them well. It has saved me countless hours of headache. Sure, {margin: 0; padding: 0; } serves the purpose as well, and I’ve used this method alone on various projects, but a CSS reset goes the extra step when I need it. When I don’t, I remove what I don’t want.

As Eric Eggert above said, it’s more of a tool belt item.
On November 4, 2009, 23:04 CET, projectatomic said:
* { margin: 0; padding: 0; }, really? Then you have to go back and give all of headings, paragraphs, forms, tables, lists, etc. the style attributes required. When using the star rule, you force the browser to apply that style rule to every single element in the document. Paragraphs, for example, usually have some vertical margin, so you need an additional rule to restore vertical margins to paragraphs. Isn’t that overwriting author declarations? Bad implementation of a powerful technique does not make the technique itself bad as your article suggests. Instead of calling reset style steets “Bad”, why not address efficient ways to use them.
On November 5, 2009, 14:39 CET, Jens Oliver Meiert said:
projectatomic, the assumption with respect to the margin/padding reset is that authors, in 99% of all cases, do set margins and paddings anyway. The reset then helps you not to forget setting them, and to achieve consistency. So the price on the code side is low, the benefits on the layout side high. All of that is different from other reset style sheets. (Short story.)
On November 20, 2009, 16:22 CET, Xan said:
Your arguments for not using reset style-sheets is ridiculous. The load time is not affected enough to be measurable and using your method the ONLY way to achieve consistency across the vast platform and browser combinations is to keep guessing at your CSS until all the agent CSS are in sync. Just insanity. I am speaking from 20 years of experience. You need to do more research but i guess this is your corner of the universe and you are entitled to your opinion just didn’t want people to be mislead.
On February 16, 2010, 7:16 CET, Werd. said:
Global CSS is crap. If I set a table or tr style and some ignorant moron has globally styled th, td, div, p, and other content-level elements, short-circuiting cascading flow and destroying the normal behaviour of elements, and making my perfectly valid CSS fail, they need to be dragged through the streets with “lazy n00b” painted on them.
On July 12, 2010, 17:12 CEST, Randy said:
While I agree that * { margin: 0px; padding: 0px } is all one really needs, I disagree that there isn’t a significant performance hit from using a reset style sheet. A few hundred bytes extra isn’t really effecting site performance. Maybe, if your sites are getting hundreds of thousands of daily visitors, you need to shave a few hundred bytes off, but really it’s not that big of a hit. You can shave far more than that off a single image its size or quality. A reset file I’ve used in the past was just over 800 bytes. This would effect load time if your users are on say a 2400 baud modem, but anyone using even a 56k modem is going to assume that the internet is slow anyway.
On July 15, 2010, 20:48 CEST, Klaus said:
The single most important reason for me to not like “excessive” resets is how annoying they are too read in Firebug. I really don’t like to scroll through dozens of declarations of “inherit” to find the real value I’m looking for, which is of course struck out.
On August 17, 2010, 21:52 CEST, Charlie said:
I almost feel like this article’s title should be “4 Common Pitfalls with Reset Style Sheets”. You haven’t really argued that the reset brings any issues to the table, but that by using someone else’s reset and not understanding why, you can run into these problems.
On March 17, 2011, 10:48 CET, Clive said:
Swing and a miss my friend.

A novice should not use them, an expert would not use them.

Am I to understand that you do not consider Eric Meyer an expert in the field of CSS? That’s a fairly bold statement for some random bloke no-one I know in the industry has ever heard of to make!

I came across this post after it was erroneously used to justify the lack of a reset script in the Zen theme for Drupal 7. A much less biased opinion can be found at snook.ca (also referred to in the Drupal 7 reset-html.css file).

Many people LIKE the fact that a stylesheet reset makes them think about every aspect. It is an idiotic thing to say that the whole genre of stylesheet is wrong simply because you can’t understand what they are for.

Your suggestion that a good alternative is to learn the default stylesheets of all browsers is obviously (at least to any expert in the field) completely impractical, and if I’m honest can only be the brainchild of a moron.

The most annoying thing about a post like this is that those who are not experts in CSS may well believe this rubbish, which in and of itself raises a new generation of CSS ‘gurus’ who have no idea what they’re talking about.

You have completely missed the point of reset stylesheets, and instead of voicing an opinion you have presented this article as stone cold fact, without providing any evidence whatsoever. In fact the evidence you’ve linked to serves to disprove your entire thought.

For shame!
On March 17, 2011, 15:51 CET, Jens Oliver Meiert said:
One can argue that people who are using resets don’t get style sheets. There is no reason to style something twice.

Despite my clumsy way of expressing myself at times, everyone please consider thinking twice before posting. Let’s all disagree respectfully. Thanks.