I have been reading a couple of blog posts this morning which reflect two very polar stances on the use of a CSS reset document. A CSS reset document is utilized to strip away all margins and padding, incluging the default page form elements. Effectively leaving you with a blank, style sheet, slate. Jonathon Snook’s article, “No CSS Reset“, explores why he believes the use of a CSS reset document is the antithesis of many of the concepts held near and dear by developers within the “Standards Community”. I have to say that I don’t completely disagree with him, particularly in the “Working with Nothing” argument he poses.
One of the principles I took away from the Web Standards community was the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear. With CSS and progressive enhancement, it was okay that things might look a little different from one browser to the next because of variations in what they supported.
Eric Meyer’s well written article, “Crafting Ourselves“, doesn’t directly advocate the practice, but rather defends it as a legitimate tool of the web design craft.
I’m not saying that craftsmen/craftswomen are those people who reject the use of common tools, of course. I’m saying that they use the tools that fit them best and modify (or create) tools to best fit them, applying their skills and knowledge of their craft to make those decisions. It’s much the same in the world of programming. You can’t identify a code craftsman by whether or not they use this framework or that language. You can identify them by how they decide which framework or language to use, or not use, in a given situation.
As I review both of these posts I find myself intrigued by the use of a CSS reset document. This is actually the first occasion that I have heard of it. I believe that the crux of Snook’s argument lies in the fact that the “Standards Community” had at one time assumed the position that, “the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear”. While I have, in the past, subscribed to this line of thought it was derived more from practicality than preference. Simply stated, it was more trouble than it was worth to try and control inconsistent cross-browser rendering too tightly.
Will I attempt to utilize a CSS reset document in the future? Absolutely. As I go through the site design process I frequently have the conversation with my clients about browser rendering inconsistencies and why they may see rendering disparities on their end. Eventually they acquiesce to this reality (what choice do they really have?). As I move forward I am hopeful that I may recapture this modicum of design control I once relinquished for the cause of standards compliance.
Eric Meyer’s Reset CSS
/* v1.0 | 20080212 */
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;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
I recently created a MODx snippet using a technique described on CSS-Tricks. This little bit of PHP code calls in the Yahoo Weather RSS feed and allows you to generate output that can be styled using CSS and your own icons. You can modify the first line of the snippet below to output weather specific to your zip code. 
