OrangeWeb.

A Little Bit of Orange Never Hurt Anyone

What’s the deal with massive CSS resets?

08 Jun 2009

It’s not uncommon for web designers to implement a some form of a CSS reset. I generally use one, as it can be essential to reset some key elements. Unfortunately I am seeing a helluva lot of unnecessary and quite lengthy CSS.

The most used reset I have run into is something similar to this…

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

… and this is around half of it.

It frustrates me when I am working with an existing webpage and someone has implemented so many resets. I find myself wasting time to define styles that should have never been reset in the first place. I do not see the point in resetting so many elements, if so few are actually affecting the layout. Looking at the example provided above, I do not see why there could possibly be the need to apply a transparent background, 0 padding, and 0 border to a strong, em, strike etc.

Now I know some people are going to be thinking “Hey! I include ‘blah’ to make sure that ‘blah’.” NO! I won’t bite.

Can anyone honestly tell me they have run into an issue where their strong element suddenly has 10px padding? Or for some strange reason your em tag has miraculously vertically aligned to the top? Never has anything like this happened to me and until it does I see the better part of the reset CSS to make the author feel “pro.”

As I said at the beginning, I do use a CSS reset. This reset will cover most the same bases as the lengthy css above… but this way is much simpler and hasn’t let me down yet.

Code:
* {
margin:0;
padding:0;
}
img {
border:0;
}

I know it isn’t perfect, but I’d rather reuse code that I can actually remember off the top of my head.

Give it a try, I’m sure you won’t be disappointed, but if you are… you’re more than welcome to go back to your 50 lines of CSS, before you even start your new webpage.

Posted by Michael Raffaele in CSS, Website Design | Permalink