Are reset CSS stylesheets useful

When the discussion about reset CSS stylesheets begin people quickly split into few groups. First group propose that reset stylesheets should be avoided for whatever reason. Second group, on the other hand, will recommend you to use it and even give you some links where to get it. The last group will be somewhere in-between. These people will tell you to use only what do you need and ditch the rest. Personally, I agree with the last one.

The idea behind reset stylesheet is to standardize the visual styling across browsers. Their goal is to give you a clean canvas to work without worrying if this or that element will look the same in IE as in Firefox. This is often mentioned by the second as main reason why to use it. Big bunch of people in web industry is of the opinion that website should look same no matter what browser will you use (yeah even in older IE).

It was, I guess, Dan Cederholm who proposed that this idea of “consistency“ in browsers is nonsense. I agree with him. However, explain that to clients …

Check this site created by Dan and few other designers – Do websites need to look exactly the same in every browser?.

For those of you interested in trying out some reset CSS stylesheet, here are links to two most used. First was created by Eric Meyer and is available to see and also download on his web. Second is actually customized version of Eric’s stylesheet prepared by html5 Doctor. This stylesheet was modified to suit the newest HTML5 elements. You can find this stylesheet on html5 Doctor website. I will also include the html5 Doctor stylesheet bellow.

Let’s now take a look at one of these stylesheets to know what exactly does it contain so we can understand how it works. For this surgery, I picked the html5 Doctor stylesheet. Its code is a bit longer in order to support newest HTML5 elements. However, if you choose to use only needed parts, this negative will vanish.

I left the code in its original form, only blank lines were removed. So, here is a snippet:

CSS:

/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
 display: block;
}
nav ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
a {
 margin: 0;
 padding: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
/* change colours to suit your needs */
ins {
 background-color: #ff9;
 color: #000;
 text-decoration: none;
}
/* change colours to suit your needs */
mark {
 background-color: #ff9;
 color: #000; 
 font-style: italic;
 font-weight: bold;
}
del {
 text-decoration: line-through;
}
abbr[title], dfn[title] {
 border-bottom: 1px dotted;
 cursor: help;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
 display: block;
 height: 1px;
 border: 0; 
 border-top: 1px solid #cccccc;
 margin: 1em 0;
 padding: 0;
}
input, select {
 vertical-align: middle;
}

Just a few notes from looking at the code … First, it contains huge amount of elements and if you don’t work on some huge company website, you will not need them all. Second, whole code can be further optimized by re-grouping elements to avoid repetition in code. And, the third, Richard is probably British.

As you can see, main job of stylesheet is focused on margin, padding and colors. Another step is setting display property for some newest elements like article, figcaption etc. to block. Important, from stylistic view, is for example the part dealing with blockquotes. Here, the quotes are removed and in the first block of code also their margin and padding – the will look like regular text. Another are lists. Their margin and padding are removed too and, if used in <nav> element, list-style is also removed.

This is great example why, if you decide to use reset stylesheet, you should pick only parts that you will need and not take as it is. Using reset in its complete form caused me few troubles in the past project. You probably guessed that my troubles related to blockquotes. I spent couple minutes playing with styles and reverse engineering until the idea of looking inside reset CSS instead of main file finally popped up. Don’t do the same mistake.

Summary

To use or not to use reset CSS stylesheet is up to you. However, if you decide to use it, I suggest you to manually select only parts you need and want so you can avoid future problems.

What is your opinion on this subject? Do you use reset CSS stylesheet in your project?

If you liked this article, please subscribe so you don't miss any future post.

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal