CSS Resets

Sunday, November 29, 2009

reset buttonEvery web browser has a default style sheet it uses when rendering content, and every web browser uses slightly different defaults. Perhaps a button will use an extra 2 pixels of width in one browser, but 3 fewer pixels in another. These differences are insignificant to many of us, but they worry some designers and keep them awake at night. This is where CSS reset style sheets come into play.

The goal of a CSS reset style sheet is to set the default styling for all HTML elements into a known state. A good CSS reset will effectively “undo” all the default styles any web browser might define. The CSS designer can then built their own style rules and feel relatively confident that a design will look the same across all browsers and environments.

For example, here is what you will be starting with after applying the YUI Reset CSS:

  • Black text on a white page background
  • Margin and padding for all elements set to zero
  • Table borders set to zero
  • All fonts sized 100% of base
  • Font-weight and font-style set to normal
  • and more …

There are a few CSS resets available on the web:

Note that YUI and Blueprint both include a CSS reset as part of a larger CSS framework.

Should I Be Using A CSS Reset?

This is the subject of some debate.

Some people feel a CSS reset creates more work – both for the designer and the web browser. The designer has to start from scratch and will write more CSS style rules to design a page that has been stripped of all aesthetics by a CSS reset. Naturally the browser will also work harder to process all these additional rules and cascades. 

But, if you care deeply a design, and how that design will render around the universe, then you won’t mind any of the extra work. CSS reset can be good.

As Eric Meyers says in his post “Crafting Ourselves”:

Reset styles clearly work for a lot of people, whether as-is or in a modified form. As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point. If a thousand people took them and created a thousand different personalized style sheets, that would be right on the money. But there’s also nothing wrong with taking them and writing your own overrides. If that works for you, then awesome.

For others, reset styles are more of an impediment. That’s only to be expected; we all work in different ways. The key here, and the reason I made the approving comment above, is that you evaluate various tools by thinking about how they relate to the ways you do what you do—and then choose what tools to use, and how, and when. That’s the mark of someone who thinks seriously about their craft and strives to do it better.

Eric’s commentary applies to many of the tradeoffs we face in software development.


Comments
gravatar Hirvox Tuesday, December 1, 2009
For me, the crucial question is whether the designer is ready to assume the responsibility for the entire user experience. Each override to the default style sheet is a declaration: "I know better than the hardware designer, the software designer and the user". If you do override a property that was crucial to the user experience in some unorthodox configuration, your override must either be better than the original or accept that you don't want to provide an optimal user experience to that visitor/customer segment. In that sense, this is an another iteration of the monoculture debate that has been going on since Netscape Navigator and later Internet Explorer achieved market dominance.
gravatar Matt Briggs Tuesday, December 1, 2009
I do appreciate the theory behind css resets, I find in practice they are a bit of a pain. Typically when I am working on styling a page, I am refreshing the browser with pretty much every small change to see how it looks. With resets, I end up with cases where normally I would remove a style from an element, but would do it in a class rather then globally. Because the reset is in effect, I don't even think about it until I put an element on the page that I would normally not apply that class to and it isn't behaving the way it should. I then need to figure out that it is the reset that is causing the problem, and then go back and hook the right styles off of the right things.

I really think it is a matter of opinion more then anything.
Stan Tuesday, December 1, 2009
CSS resets make my blood boil. They are used by designers who haven't embraced the web. They think they are still designing business cards and magazine layouts and they have no empathy for the user who has their own settings in place. I'd like to strangle them with their own black turtlenecks.
gravatar Tim Tuesday, December 1, 2009
When I was a webmaster for a television station I would use CSS resets on a regular basis because the site required it or else table-based or layer-based layouts just wouldn't show up correctly within the content area of the site. Resets became a necessary part of my life because of the broken nature of the site I was working with, and while I can see the point Hirvox and Stan make above, I feel resets are very necessary if you have a particular way the content needs to be displayed. Ultimately the site needs to degrade gracefully regarding CSS or else you run the risk of the site being unviewable for people who aren't surfing via a desktop web browser.
gravatar Will Green Tuesday, December 1, 2009
Just to be clear here, CSS Reset stylesheets DO NOT override user stylesheets anymore than a non-reset stylesheet. Styles are applied by weight, origin, and specificity. The user stylesheet is of higher importance when considering origin (when weight and specificity are the same). If you're using a CSS Reset with very specific declarations and uses !important a lot, you're doing it wrong. See http://dbaron.org/css/user/cascade for the precedence on the cascade.
gravatar Ryan Rivest Wednesday, December 9, 2009
While I really liked the idea of a CSS reset when I first saw Eric Meyer's, I have found that in practice it's just a little too much work for me. I found myself having to declare styles for things that normally look just fine and I might not even notice the cross-browser subtleties. Sure, a button might have a little extra padding, or my text may have a an extra pixel between lines, but I think there's a happy balance between a complete reset and just using the browser defaults. For elements that are important to me to look identical, I can always set their styles appropriately. On my next app I won't be using a CSS reset unless I have a compelling reason to.. it's just too time consuming :)
gravatar Helen Wednesday, December 9, 2009
I think the idea of a base stylesheet is better than a reset one because you can normalize the browser but still have sensible defaults.

That said, it's not that easy to actually create one. I didn't really like the YUI method of removing the styles and then putting them back. You end up with a lot of styles that don't really do too much.
gravatar ugg Friday, October 15, 2010
That said, it's not that easy to actually create one. I didn't really like the YUI method of removing the styles and then putting them back. You end up with a lot of styles that don't really do too much.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!