blog

CSS Resets

March 31 2010 by Joseph Smith

A good CSS reset file is one of the most helpful things you can have in your front-end arsenal.

  1. Debugging cross-browser CSS issues will be a much, MUCH simpler process
  2. 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.

  1. Eric Meyer's CSS reset is perhaps the most comprehensive place to start http://meyerweb.com/eric/tools/css/reset/.
  2. Additionally, the YUI team's offerings are fairly comprehensive as well http://developer.yahoo.com/yui/reset/
  3. 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...
  4. And a fine counter-approch from FiveFingerCoding http://www.fivefingercoding.com/xhtml-and-css/create-custom-css-reset

Thanks Joseph for CSS Resets.

Thanks Joseph for CSS Resets. I was looking for something that.

Joseph Smith

Joseph Smith

Joseph currently works full-time as a developer for Legwork Studio in Downtown Denver, CO.

In his past life, he was a touring musician and turned screws on/repaired Apple hardware.

Tags