Why “Reset” Style Sheets Are Bad

Published on Apr 19, 2008 (updated Feb 5, 2024), filed under development, css (feed). (Share this on Mastodon or Bluesky?)

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

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)