CSS Resets: What do You Think of Them?

What do you think of CSS resets?

Do you use a CSS reset? If so, is it of your own design, or is it one of the ones freely available online?

I've heard loads of people arguing for CSS resets, and loads of people arguing against them. Where do you stand on the subject?

 

I use them -- I rolled my own that is surprisingly similar to the one Eric Meyer uses. Here it is:

/* GLOBAL RESET STYLE RULES */

	html, body, address, blockquote, button, dd, del, div, dl, dt, fieldset,
	form, h1, h2, h3, h4, h5, h6, hr, ins, map, object, ol, p, pre, table,
	tbody, td, tfoot, thead, tr, ul {
		margin: 0;
		padding: 0;
		vertical-align: baseline;
	}

	body {
		background: #FFF;
		color: #111;
		font: 85%/1.5 verdana, arial, helvetica, sans-serif;
	}
	
	a {
		background: transparent;
		color: #00F;
	}
	
	a:visited {
		color: #909;
	}
	
	a:hover, a:focus, a:active {
		color: #F00;
		text-decoration: none;
	}

	fieldset {
		border: 0;
		display: inline;
	}

	h1, h2, h3, h4, h5, h6 {
		background: transparent;
		color: #111;
		font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
	}
	
	hr {
		position: absolute;
		left: -999em;
	}

	img {
		border: 0;
		vertical-align: bottom;
	}
	
	object {
		vertical-align: bottom;
	}

Code (markup):

Anything I need to change (such as a body background or text color) I can do so within the reset.

 

Dan, I've been reading about CSS resets of late. Sometimes people attack them; other times they recommend them. I'm guessing that you fall into the latter camp. But what do you make of the arguments put forward against CSS resets?

• You have to declare much more than you ever needed to get browsers back to rendering things the way you want, thus increasing your workload.
• You have to keep going back and undoing individual resets as you're project progresses, which adds more to your workload.
• In many instances, the inconsistencies among browsers are minor and therefore not even worth a reset.

 

I'm a big fan of CSS resets, but only for the CSS I know I'll use. If something happens to come up later there's no harm in either declaring it somewhere else in the stylesheet or hitting Page-Up a few times and adding it to the reset.

It's not really that much of a problem, if you use a pre-made CSS reset then all you're really doing is copy/pasting, and adding a few kb's to your stylesheet's file size - hardly the end of the world . If you're writing a CSS reset from scratch then yes, you could argue there is a lot to declare but like I said, if you know what CSS you will or won't use it makes the task a lot quicker. For example, on a small site I just made I used about 10 lines of CSS reset. Took about 2 minutes to write. Not sure about anybody else but I'd rather spend a few minutes writing a CSS reset as opposed to worrying about how things will display in different browsers.

Again, not really a problem. If you want to over-ride something in the reset all you have to do is declare it again further down the stylesheet. For example if my reset contained:

a {color: #ff0000;}

Code (markup):

...now let's say I want all of the <a> tags within <p> to display in green instead of Red, all I would need to do is add the new CSS anywhere below the reset.

p a {color: #009900;}

Code (markup):

...as long as that is anywhere below the reset, it will use that instead. This is because Browsers read files from the top to bottom, and if the same thing appears twice it will ignore the first and use the one furthest down.

I guess that's a fair enough point, on Modern Browsers anyway. IE8 has seriously improved the way it renders code and it pretty similar to Firefox in terms of how it displays websites (still not perfect, but it's getting there). Unfortunately we're a generation reluctant to change, consequently there is still high percentages using old browsers such as IE6 and IE7. Then you could argue that for the few minutes it takes to paste in a CSS reset, you might as well.

 

1.) I only declare what I need in the reset. Everything else gets added as-needed later on. I'm also not afraid to over-ride the reset from inside it (you know, alter it) if need be.

2.) Never been an issue for me. Then again, I also write my CSS so that its code order matches that of the HTML in the documents (that's right, it matches the HTML source code order).

3.) Only in the latest generation or two of browsers. I cater to a larger variety than that; in fact, many of the layouts I code work just as well in IE 5.01 as they do in IE8, Firefox 3, Opera 10 and so on.

But if they want to waste time by nit-picking, that's fine with me. Just means less of their time is spent working which only benefits me.

 

As one opposed to css resets as being redundant time wasters, and as creating new opportunities for error, I will save time and energy by posting a link to my arguments.

Why css resets are worthless.

cheers,

gary

 

I heard of CSS resets some time ago. For some reason, I never actually thought of implementing one. I simply built my sites and checked for cross-browser compatibility. Sometimes I found minor differences, usually in IE, which I fixed. The process taught me a lot about how the different browsers work, and even more about how to fix the problems (or 'bugs') using conditional comments and CSS hacks.

Recently I've been reading a lot about CSS resets, and considering if I should start using one. I've found the arguments against them to be more agreeable, so I've decided not to do so.

Below is my reasoning. You do not have to agree with it.

• The styling of elements should be addressed individually, as and when you need to, in the context of the current project. You may find that the element didn't need to be reset in the first place.
• Subtle cross-browser differences don't really matter. It's impossible to get all clients to render the exact same picture. If there are any major differences, they should be addressed individually.
• It's important to be aware of all the potential inconsistencies between browsers. It's more professional and makes you a more knowledgable developer.
• Default values are useful. Their purpose is to give you a headstart. To undo them is to increase your workload. Just adjust them as and when you need to.
• Every project is unique. Going back to undo resets is therefore almost inevitable.
• Many of the elements that are reset will not even be used. You'll therefore have to delete the styles or just leave them as idle extras.

With that said, I do think that there's room for a 'global.css', a document which includes styles that you always use.

 

It probably makes more sense to have a "reset" as in a "global" stylsheet when you have a sprawling octopus-like site with many branches which each has its own individual styling.

I started using css resets when I found I was sick of the constant margin: 0; padding: 0 just to set things where I thought they should have been in the first place.

Later I really pared it down and mostly just remove margins. If I want margins, I'll ask for them, and if I don't ask for them, I want them to be zero without having to keep saying so. I'm lazy. So I reset.

That said, other than removing everyone's margins, I really only have two or three other elements mentioned in my reset, and it's never, ever a separate file.