Jens Meiert

Why “Reset” Style Sheets Are Bad

Jens Meiert, April 19, 2008 / April 27, 2008.

This entry is filed under Web Development.

Okay, Jonathan set the pace, Eric countered, a few people carried on, and me, officially having announced comprehensive reset and undo style sheet criticism in January, feels finally obliged to politely point out that reset style sheets are bad: A novice should not use them, an expert would not use them.

Disadvantages

Since I haven’t been asked if it it’s fine for me to discuss resets right this evening, I didn’t invite any numbers for dinner yet – the stats I had on my agenda demand more time. But apart from Jonathan’s and Eric’s remarks, there are a few major issues with CSS resets like Eric’s classic or Yahoo’s interpretation:

Alternatives

At the end of the day I do agree with 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.

Read More

Enjoy some popular posts, probably including contemporaries:

Comments

  1. On April 19, 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. :-)

  2. On April 19, 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.

  3. On April 19, 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.

  4. On April 19, 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.

  5. On April 19, 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.

  6. On April 20, 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.

  7. On April 20, 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.

  8. On April 20, 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.

  9. On April 20, 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;
    }

  10. On April 20, 12:21 CEST, Jens Meiert said:

    Markus, yes, though the YUI Lib would even require different notes.

    Eric, interesting remarks, and you’d certainly agree that a (experienced) developer should know all the tools he has and for what he really needs them.

    John, the “sledgehammer” metaphor is not too bad (quite the contrary, actually) :)

    Martin, exactly!

    Leonard, now that is quite a bunch of style sheets – how is your experience with maintenance then, does this really help it? (All of a sudden reminded of Choke.)

    Eric,

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

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

    Andrei, well, I cannot really see any situation where at least an unmodified reset (like Eric’s or YUI’s) is really useful, that is not meaning less elegant code or worsened maintainability.

    Alan, I feel some passion :)

    Вадим, Eric does, and yet people don’t read on the web anyway …

  11. On April 20, 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. ;-)

  12. On April 22, 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…

  13. On April 22, 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.

  14. On April 22, 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 ;-)

  15. On April 22, 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.

  16. On April 23, 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.

  17. On April 23, 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.

  18. On April 23, 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!

  19. On April 23, 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.

  20. On April 23, 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?

  21. On April 23, 20:30 CEST, Jens Meiert said:

    Alan,

    I love your proposal for CSS constants.

    thank you, though, to make sure, you mean the proposed selector variables? A first draft is still in progress but will hopefully go out “soon”.

    About that universal reset for your screen CSS. Try this:

    Oh, I still need to try, although I’m somewhat careful about changes like these. Thank you again! :)

    Ben, good point ;)

    Eric, nice one …!

    “About Webdesign”, though you basically violate the comment guidelines, you’re right, there is no “holy grail” yet, and most likely there will never be one ;)

    Jordan, very interesting observation! However, it basically depends on the goals, and if it’s the goal to write really efficient style sheets, resets all the more demand true expertise. That is a really rough but probably already sufficient explanation for this “phenomenon”.

    Chris, kontur, at least from my experience you’re thus doing quite fine (and I hope that sounds alright) :)

    Eric Ferraiuolo, one might also consider default styles a nice “starting point”, huh?

    Jason, absolutely!

  22. On April 25, 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?]

  23. On April 29, 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 < href=”http://kurafire.net/log/archive/2005/07/26/starting-css-revisited”>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!

  24. On May 1, 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..

  25. On May 2, 11:18 CEST, Jens Meiert said:

    Buckthorn, nice bringing up “compared to what” (which is not only appropriate in information design context, sure); and you’re certainly right that things are not so simple. Or, not always ;)

    Maniquí, well, many points (thank you!) … A few loose thoughts: I don’t consider the mentioned margin/padding reset a real reset in the sense how other resets are at least used (as a separate style sheet, most of the time, consisting of many more rules). Concerning reading on the web, yeah, I even pointed to Eric’s remarks, so I guess I read them ;) And for default style sheets, well, this probably deserves another post covering their use, inconsistencies, and what gets “overwritten” anyway.

    Adam, I am not sure if you understood either my post or my style sheets.

    – Anyway, some of my readers already know my “communications style” and others are getting to know it by posts and discussions like this – I love you all :)

Leave a Comment

Leave a Comment

Respect the comment guidelines. XHTML allowed: <a href=""> <abbr title=""> <blockquote> <code> <em> <strong>

Found a mistake? Reward! Email me, jens@meiert.com.

You are here: meiert.com – Archive for 2008 – Why “Reset” Style Sheets Are Bad

Last update: April 27, 2008. Copyright 2000-2008 Jens Meiert. Legal notice.