Is this good practice?

[Burgin]

I once came across an article (can't remember where) that stated that it's good practice to start your main css file with the following bit of code.

It would be useful to me and probably many others, if someone could explain what each section achieves (there are a few notes in there but a bit more depth would be great) and is it all still current? Your commeents will be appreciated.

Here's the code...


/* reset everything! */
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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}

ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}


/* -----[ Main stuff from here on]------------ */

[traq]

This is a css reset. The idea is to override all the default values for various browsers, thus getting them all to render your page in the same way.

They're not intended to be cut-n-pasted as you have there (note the "remember to define styles!" comment). Since you're wiping out as much of the browser's defaults as you can, you need to provide the browser with your desired defaults. Just setting everything to zero (including margins and padding) will probably not help you achieve the layout you want. Resets are more work (because you have to think of everything and define it all manually), but provide greater control.

On the other hand, there are many situations where letting the browser defaults remain is just fine - people tend to get upset that their website looks different in Firefox than it does in Opera, but if you stand back and think about it objectively, it's usually not really a problem. When you consider liquid layouts and user-defined styles, it's best to get used to allowing some of that variation, rather than calling your design "broken" because the font size is smaller in IE.

(Speaking of IE, yes, there are plenty of times when it is desirable to use a reset just for IE's sake. :) )

[azoomer]

This might be of interest:

http://meyerweb.com/eric/tools/css/reset/


http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/