Should You Reset Your CSS?

Dec 23 2010 by Michael Tuck | 35 Comments

Should You Reset Your CSS?

This article explores the ongoing debate on whether or not web designers and web developers should reset their CSS, sharing the thoughts and opinions of several web professionals.

This is a three-part series of articles on the topic of CSS resets. After discussing the rich and interesting history of CSS resets (Part 1) and going over CSS reset stylesheet options (Part 2), we will now discuss the pros and cons of using reset stylesheets here in Part 3.

The Benefits of Resetting Your CSS

Web designer/developer and book author Morten Rand-Hendriksen is a huge fan of CSS resets; he has advised everyone to use them as the foundation of their stylesheets. "If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead," Rand-Hendriksen said in his blog. "And since different browsers have different parameters your site will end up looking different depending on what browser you use."

In an interview by email, Chris Coyier–a web developer and the founder of the web design community, CSS-Tricks–expressed support for the universal selector margin/padding reset (discussed in Part 1). He said that all he’s "ever used is * { margin: 0; padding: 0; }."

Defending the "hard reset" method, Coyier outlined two main concerns that web designers typically have against using the universal selector.

The first is that it can break web browser default styles for things such as form elements, which he said was "untrue" unless you use a border:0 property in the style rule.

The other concern of using the universal selector to reset your styles is the performance hit caused by using such an unspecific selector. But Coyier argues that, while this is true technically, "almost all slowdowns that occurs from it is so minuscule that I guarantee nobody will ever notice."

In Support of No CSS Reset

Web developer Florent Verschelde made a strong case for not using CSS resets, and instead, suggests that web designers should rely on well-crafted stylesheets to address cross-browser inconsistencies. Verschelde argues that "browser defaults are sensible and useful."

Thanks to the default style rules of web browsers, "your content will always be readable (though not sexy)," according to Verschelde. "If you take them away, you risk having content (say, user-generated content) that ends up being unstyled, raw."

Most designers and developers who believe that browser defaults cause most layout problems are wrong, according to Verschelde. "With sufficient knowledge of CSS, you will realize that most of those things you thought were inconsistencies due to browser defaults are actually caused by poor understanding of the collapsing margins standard mechanism; hasLayout bugs in IE 6-7," he said.

Most of the actual inconsistencies crop up in the margins and padding of the body element, the margins and padding of lists, and heading font sizes. "If you feel like those few inconsistencies justify setting everything to zero then having to specify the exact margin and padding of most elements in each situation, then do use a reset stylesheet," Verschelde said. For those looking for a different solution, he offered his "no reset" base stylesheet as an alternative.

In 2008, developer/designer Jens Meiert wrote, "reset style sheets are bad: A novice should not use them, an expert would not use them." Meiert justifies his contention by noting that reset stylesheets assign baseline defaults that are just overwritten later on anyway (which makes your CSS inefficient and redundant).

In a blog post titled No CSS Reset, developer and book author Jonathan Snook said that he’s "okay if the various browsers show things slightly differently." He likes his "lists to have bullets and strong elements to have bolded text."

Web standards and accessibility advocate, Tommy Olsson, professes that he’s not "a big fan of CSS resets" in an interview via email in late 2010. He said people that use CSS resets are "stuck in a print design mindset," and are continuing to believe in the myth of "Pixel Perfection". He finds CSS reset stylesheets inefficient, because you "provide a lot of rules that you know you’re going to override later."

Main Concerns with CSS Reset Stylesheets

Russ Weakley pointed out three major concerns with resetting your CSS:

  1. Every element that is "zeroed" must then be redefined. This can cause an increase in CSS file size.
  2. CSS reset stylesheets can present issues if you remove the default behavior for an element and then forget to restyle it.
  3. Some reset stylesheets can be harmful to users who rely on keyboards for navigation.

In a 2010 interview by email, Weakley said that he was surprised when he found that designers and developers used his caveats as evidence that resets should not be used at all. He said that CSS reset stylesheets should be viewed as another tool that designers could use, tweak, and modify to suit their own needs.

Problems with the Universal Selector

Web developer Dave Ward noted three problems associated with using the universal selector (*).

First, more properties than just margins and padding need to be reset.

Second, the "collateral damage" from the use of the universal selector "wreaks havoc on form styling."

Third, the universal selector "has negative performance implications in almost every scenario, whether a CSS reset or routine CSS styling."

Unloading on Eric Meyer’s Reset CSS

Eric Meyer’s Reset CSS–perhaps currently the most popular CSS reset stylesheet–has come under fire in more than a few occasions.

It seems that many users failed to read Meyer’s discussions of Reset CSS and just dropped it into their designs without paying attention to the author’s advice that it should be used as "a starting point, not a self-contained black box of no-touchiness."

Dissecting Reset CSS

In 2007, web developer Gary Turner dissected Meyer’s Reset CSS, in part, to argue against CSS reset stylesheets in general (read his forum post titled Global resets considered harmful). He noted that Reset CSS includes deprecated items (such as <applet> and <center>) as well as unnecessary/redundant styling of elements that already have no padding or margin (such as <a> and <img>).

Turner is pretty vocal about his opposition to the entire concept of resets, but his opinions don’t go entirely unopposed. In a SitePoint forum post, web designer Dan Schulz suggested that "being able to kill the margins on non-form elements" helps a lot.

"It’s a lot like the way the Marine Corps trains its recruits. In order to build up a Marine, you first have to tear down the teen," he said.

The Use of :focus in Reset CSS

In a slideshow presentation, Weakley cited the following code as being harmful to keyboard users:

:focus {outline: 0}

When there is no visual representation of the active element (such as a link), it makes web page navigation difficult for keyboard users because they are unable to see which HTML element they are currently on.

:focus in Reset CSS

In an email interview, Meyer discussed the :focus controversy and said that he didn’t anticipate that people would just use Reset CSS without first understanding how it worked. Regarding the :focus style rule, he said: "Honestly, I put it in there to get people to define one. Clearly what I should have done was have outlined 3px solid red or something like that."

"From an accessibility viewpoint the mistake was in mentioning it at all, unfortunately. But on the other hand, you can’t really get away with, ‘Maybe if we don’t mention this, no one will ever notice it.’ They always notice it," Meyer said.

Meyer promised an update to Reset CSS which will probably take the rule out and replace it with a comment reminding its users to define a visible :focus style rule.

The importance of making sure that the :focus pseudo-class selector has a visual property is such that a website called outlinenone.com has the single mission of warning against setting the outline CSS property to none or 0 for links. To learn more about this issue, Patrick Lauke has a tutorial on styling the :focus pseudo-class.

The Voices of Moderation

Naturally, there’s a middle ground to this whole thing. In November 2009, author and designer Jason Cranford Teague examined the issues revolving around resetting CSS and came down firmly in the center. He suggests that the use of resets should be determined by the needs of the web design project.

He noted the same pros and cons others had discussed about the use of resets and concluded that you should keep yours as simple as possible. "Keep it simple, keep it compressed, and keep it at the top," Teague advised.

Meyer himself is quite evenhanded about the use of resets. In April 2008, he wrote: "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."

Eric Meyer says that the key is to "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."

Acknowledgements

Thank you to the individuals that contributed to this three-part series on CSS resets.

CSS Reset Resources and Tools

Related Content

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

35 Comments

Greg

December 23rd, 2010

I’m in the “you are going to redefine it later anyhow, making it redundant” camp. I have never needed nor wanted a reset, and I have found with rare exceptions that it does more harm than good.

dimi

December 23rd, 2010

I am so used to starting every project with a reset that it will take some getting used too not having it in there, might have to give it a shot though…

Nicole

December 23rd, 2010

I’ve always questioned if I should use CSS resets such as Eric Meyer’s, but personally I agree with Florent Verschelde’s view… “browser defaults are sensible and useful.” I find it extremely annoying when I’m working on someone else’s code and they have everything reset and then I have to add unnecessary code to make it all work.

Anne Cossette

December 23rd, 2010

I agree wholeheartedly with Florent Verschulde and Jason Cranford Teague! Thank you. I’m not a huge fan of CSS Resets (and I’ve done my homework, and even tested it myself and found it wanting!). I use some resets – but do so extremely sparingly and only if there is a true need.

Tommy

December 23rd, 2010

I’m a reset user. I also understand them enough to know that they are not meant to work for everyone right out of the box. Some customization is required of course. Yeah I might have to do a little more typing to re-define reset styles but to gain full control over how things will render is a huge plus for me.

Everyone preaches the separation of markup and styling, we all know it’s the right thing to do. Letting the various browsers (randomly) choose how they want to style my markup does not sit well with me. Especially since most of the styling we’re fighting is leftover from the days before CSS existed. We have CSS, let’s use it to handle ALL of the styling.

Amos Vryhof

December 23rd, 2010

CSS Resets are nice, but the thing I dislike about them is that they kill margins on elements that really should have them.

One of my intentions is to, at some point change the CSS reset I use so the elements still behave in the default manner, but also in a standardized manner on all web browsers. I like my paragraphs having margins, and my bullets working like bullets. CSS Resets usually break these, I plan to simply standardize them. There are other things, but those are just two off the top of my head.

It’s often better to tame the beast rather than kill it.

peter

December 23rd, 2010

whatever, I’m sticking to my reset:

html, body, div {padding:0; margin:0;}

Sunny Singh

December 23rd, 2010

Personally, using a reset helps a ton. True that I’ll probably end up specifying the same properties again anyway, but I design within the browser so it would be annoying to have all those senseless margins and what not.

As for the focus issue, I define my own focus styles. The dashed border looks ugly, so I use whatever styles I have on hover for the focus.

Tony Legrone

December 23rd, 2010

I’ve never considered using a global reset css.

I’d say 99% of the sites I’ve built are using a CMS and I could never account for every element a client might put into their wysiwyg.

By leaving browsers to keep their own defaults, I only have to define the margin and padding for the body, paragraphs, lists, and headers.

A reset sheet would only hinder my development.

erbo

December 23rd, 2010

One could just take something from both sides, start with the reset and alter it (remove reset elements) that you defined later (or all of them if you redefined everything, using reset only as a reminder/guideline).

Leon

December 23rd, 2010

I use a reset that zeroes the margins and padding on a small range of elements that I know I’ll restyle (p, lists and headings, basically) and sets some HTML5 structural elements to display: block. Making every site look exactly the same is a waste of time, as is restyling absolutely everything.

Oddly enough, I changed from * {margin: 0; padding: 0;} after reading a comment to a blog post by Florent. Knows his onions.

Stelian Andrei

December 23rd, 2010

I for one I’m all for resets. And here’s why…

Browsers implement the guidelines set in place as they see fit and how the developers “think” they should be. You design for the users, nor for a specific user with a specific browser. That’s why a reset brings everything to a common look. Yes it brings unnecessary operations rendering to the browser. Yes your CSS will be a little more chubby. But it saves you trouble later on. What if the next version of a specific browser decides to change the way it did things up until then and it’s a completely new way. What do you do then? Scan through all of your CSS and try to fix the declarations that are troublesome? Resort to hacks?

Think of CSS resets as a blank sheet of paper (“tabula rasa” if you please) and create something that stands the test of time.

From my point of view resets should be used every time you’re not designing for a specific browser (eg. in-house corporate project). If you’re designing for the web you NEED to use them to save yourself the trouble later on.

Story: the company I work for has had a big enough client to provide them with all the accessibility/features they wanted. So we checked the design looked and behaved properly in every browser we could think of. After we turned in the final work that client’s director (a.k.a. the big shot) said that it looks like s**t and the final payment will not be made. Turns out he was using an old version of Netscape (company computer, no IT department, software/OS installed pre-2000). We didn’t use any CSS resets for that project. To fix things we finally managed to persuade him to upgrade to a modern browser.

I’m not saying that using resets would have made that deign work from the start. But that anyone still know the way Netscape uses margins/borders/padding/outlines/line height ?

Charles LaRocca

December 23rd, 2010

Loved this article. I am self taught and always thought I was crazy or doing something wrong because I didn’t use the-constantly-praised CSS reset. I am normal!

Michael Tuck

December 23rd, 2010

Amos, you make a good point. If readers take anything away from these articles, it’s that resets should be customized to suit the user. Dropping in boilerplate resets from somewhere — Meyer, Krespanis, the local pool hall, wherever — and then screaming about how they foul up your design is not good practice.

Exodus

December 23rd, 2010

Great article.

Red

December 24th, 2010

Good article Michael, and I liked the pro and cons arguments.

uiavenue

December 24th, 2010

This may be crazy. Why not asking/forcing/requesting the browser makers to have the same basic style parameters, so that the basic things will look same? W3C may do this. then we don’t need to use Reset Styles… lol

Vivek Parmar

December 24th, 2010

i’m a beginner and didn’t know many of the things about css, thanks for sharing and helping me to learn new things

Scott

December 24th, 2010

Using a good reset along with semantic, valid HTML will solve 95% of your cross-browser issues, including IE6.

David

December 24th, 2010

Nice article, ive been debating about CSS resets for a while. I will continue to use Eric Meyers reset, for the time being….

Andy

December 24th, 2010

A good read with some interesting points. I find complete reset to be overkill and that the browser defaults can generally be accomodated…

Scott Schlegel

December 26th, 2010

I have always wondered why browsers haven’t implemented a directive that could disable default styles. Seems like the W3c could get involved and make it standard.

Siddharth Menon

December 27th, 2010

Its not something you can say no to. Reset is important for most of the times, defining a default value for elements make sense.

I often had rendering issues on different browser. Its not easy to use reset CSS for 1st time but as you progress you tend to design your CSS around it, giving the right values & keeping the design consistent across browsers.

Morten Rand-Hendriksen

January 4th, 2011

I’m a little late in the game here, but I think a comment is in order: As you mention off the top of your article, I am a huge fan of CSS Resets. The interesting part is that I’m a fan of them precicely for the reason Verschelde uses against them: They force you to build proper stylesheets.

Think of it from a learning perspective: Through my books, by blog and classes I deal with a lot of people who are either starting out or are trying to beef up their knowledge of amongst other things CSS. They frequently come to me with issues concerning “weird” behaviors in their sites: Seemingly random font sizes, margins that pop out of nowhere, positioning issues, all the classics. A quick overview of their stylesheets invariably crops up some selector or attribute that has either not been defined or that has been defined improperly. Upon finding the error the same exact question always arises: How was I supposed to know that would happen? I didn’t plan for this particular circumstance when I built the site. That’s where the Reset kicks in more than anywhere else.

Here’s my thinking: If you are not a genius CSS coder that produces perfect code every time, chances are unless you are made aware of it from the get go, you are going to overlook one or two or a hundred important selectors and attributes. And all these overlookings are going to come back and bite you at some point. By employing the CSS Reset off the top you start off with the very clear notion that nothing is defined and everything has to be controlled. That way you are forced to do the job properly. And once you’re done, if you are so vehemently against the CSS Reset, you can just take it out again. After all, if you really did define every selector and every attribute it has no purpose.

What I find interesting is when I force a CSS Reset (I use Meyer’s CSS Reset Reloaded btw) on sites that are considered perfect. It gives you a very quick and telling picture of what was ignored and where the developer took the long way around to solve a simple reset issue.

I agree with everything that’s been said in this article though I land on the opposite side of the fence. That said I’m not a dogmatic on the topic. The CSS Reset to me is a valuable learning tool and a quick way to make sure everything is done right.

Guest

January 4th, 2011

if it cause so much trouble, why not just make a global standard browser stylesheet for those browser to use?.(and that would be the reset.css that we’re talking about)but what
i mean officially as a standard.
or
for those against reset.css (i think they forgot about layout consistencies against different browser) i still don’t understand them

Ralph

January 4th, 2011

Great article, It’s nice to see both sides of the argument.

I have only ever heard the pros of using CSS resets, never any cons, it’s good to get a balance.

simon

January 4th, 2011

good article, I have also never read about the negative points about css reset so thanks, and keep them coming

Tim Petch

January 7th, 2011

I always reset, and to be honest, had never considered the browser defaults to be a positive thing, i always figured its easier to start with a blank canvas, this article is definitely food for thought! thanks for sharing

Gabriel Koen

January 15th, 2011

Neat article. A lot more depth than I expected.

From the article: according to Verschelde. “If you take them away, you risk having content (say, user-generated content) that ends up being unstyled, raw.”

This strikes me as silly, like he’s having to make up reasons to substantiate his position. Resets will only be applied when you tell them, at the start of your main stylesheet. If your stylesheet doesn’t get loaded, then your resets don’t get loaded, and your “raw” content is safe.

Resets are very useful for dealing with the real world where clients, designers and managers demand “pixel perfect” looks in all browsers.

Joshua M

January 20th, 2011

I prefer the reset.

Looks like a lot of arguments are “we have to redefine it later”.

Well, you have to do that anyway. The reset forces you to be thoughtful with what you’re doing. If you’re not testing any user-generated content with all of the styling that you allow them to use, that’s just lazy…

Seems to me the argument against reset is a lazy developer kind of argument.

Michael Tuck

April 15th, 2011

@Morten, I’m VERY late in responding. I didn’t see your comment until now, when I revisited this article after linking to it in a Sitepoint forum thread. I wish I had interviewed you for the article, as much of what you say in your comment would have gone well in the body of the article itself. Thanks for the comment, and I apologize for failing to respond sooner.

@Guest, a global CSS stylesheet? Arrgh, the concept makes me twitch. You might be interested in Thierry Koblentz’s base.css, explored in the second part of the article.

Gary Turner

July 5th, 2011

First, thanks for the mention in despatches as the Brits so coolly describe it.

If one is going to use some form of reset, then Koblentz’s approach is preferable, if overdone.

Someone above also wished for a means of turning off the browser default stylesheet. The problem with that is that without the built in defaults, the whole page would render as an inline stream of text and inline-replaced content, including elements in the head, with all white spaces collapsed to one space; a cure worse than the disease. Those defaults set block elements to display as blocks, list items to display as, um, list items, tables and rows and cells to display properly, the head to not display, &c..

cheers,

gary

Rufas

August 14th, 2011

I will go with the reset path. Personally I find it easier to work on a blank canvas than have everything pre-defined. I always have problem in deciding which elements I need to keep and which ones I need to redefine. Hard resetting everything just make it simpler. It is like you are given back the control to design your site.

After all, it is *your* site. Is it too much to ask for a designer to claim back the ability to control how each browser render your sites?

- Rufas

Alien

December 25th, 2011

Wow, I just went back and forth in my mind on which side I should take about using resets or not about 3 times while reading this article. I think I’m going to stick with resets for now. The extra code IMO doesn’t do much harm and with compression, you can always downsize the filesize.

Leave a Comment

Subscribe to the comments on this article.