A good CSS reset file is one of the most helpful things you can have in your front-end arsenal.
- Debugging cross-browser CSS issues will be a much, MUCH simpler process
- It will save you from having to explicitly redeclare things like
margin:0; padding:0;on all your selectors.
Where possible stick with the D.on't R.epeat Y.ourself methodology, just because we are dealing with CSS, doesn't mean it's ok to leave duplicate or messy code laying around.
What's the catch? well the _potential_ catch is, performance. Some have argued that setting aggressive resets are a bad strategy because they reset obvious presentational cues (like the default list-style for an <ol> being decimal/numbered vs none), but the truth is, i would rather be able to explicitly style my elements and not rely on default browser behaviour.
Below, for sake of sharing, is the current reset i use when starting fresh on a new project. This is a slight mod on Eric Meyer's CSS reset found here http://meyerweb.com/eric/tools/css/reset/.
this may go without saying, but be super careful when applying multiple globally scoped CSS resets/declarations to an existing project, it can and likely will have some nasty and annoying consequences.
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;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
a, :focus {
outline: none;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Luckily, (perhaps for all involved) I am not aiming to recreate any wheels, but rather point to a few fine resources.
- Eric Meyer's CSS reset is perhaps the most comprehensive place to start http://meyerweb.com/eric/tools/css/reset/.
- Additionally, the YUI team's offerings are fairly comprehensive as well http://developer.yahoo.com/yui/reset/
- Smashing Mag is a "family favorite" reference and they don't disappoint with this css article
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-desi... - And a fine counter-approch from FiveFingerCoding http://www.fivefingercoding.com/xhtml-and-css/create-custom-css-reset

