One of the most important features of any web development service is consistency among different browsers, and utilizing a smart CSS Reset is the best way to accomplish this. But what exactly do I mean by a smart CSS Reset? To answer that let me first explain what a CSS Reset does and what a stupid one is.
A CSS Reset essentially levels the playing field and provides a consistent foundation to build the rest of your styles upon. Even with no CSS, each browser applies it’s own basic styles to your code, by default. In other words, each browser has its own CSS that it applies to every single web page you load. Now this wouldn’t be a problem except for the fact that these default styles vary from browser to browser. This brings us to the most important benefit of using a CSS Reset – to create consistency. To briefly recap, a CSS eliminates the default variations between browsers and creates a clean-slate for your styles.
Reset CSS leves the playing field for your CSS to work.
Now that we know what a CSS Reset’s purpose is, I can explain what a smart CSS Reset is. Back when these resets were first introduced, people would use a blanket statement to effect all elements on the page. I call this the sloppy reset:
Sloppy
* { margin:0; padding: 0}
The problems with this reset are twofold. First, it does not address all of the styling issues that are set by the browser. Margin and Padding are by far the most important styles to reset because they directly affect the placement of all the elements in your design, but other attributes such as font-weight, font-styles, line-heights, and table borders are other important factors that this overlooks. But more important than the extent of effect is the technique this reset uses to handle browser irregularities. This reset uses a carpet-bombing/shotgun approach where all elements are effected – this runs a HUGE toll on the browsers capacity to load styles quickly as each and every element on the page is being effected. A smart CSS addresses all the attributes and does so in a focused manner – resulting in full coverage and fast rendering times.
An example of a smart CSS Reset:
Eric Meyers Reset v1.0
/* 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;
}
Not only does Eric Meyer’s CSS Reset cover a more complete set of attributes, but it does so by focusing on the specific elements that are affected by them.
Here at Codecopia, we’ve taken to Eric’s Reset and have applied some tweaks of our own to it, which we use for all of our projects. Feel free to use this reset in your own projects.
CC Reset v1.1:
/* Codecopia Reset v1.1 */
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 {
border:0;
font-style:normal;
font-weight:400;
outline:0;
margin:0;
padding:0;
}
:focus {
outline:0;
}
ol,ul {
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
caption,th,td {
text-align:left;
vertical-align:top;
}
a {
text-decoration:none;
}
Summary
To summarize, CSS Resets help developers by creating a consistent foundation by overriding the different default CSS that come with every browser. Inferior CSS Resets apply general style overrides to all elements indiscriminately, while more advanced resets apply specific styles to select elements in a focused manner. A more direct approach can also reduce rendering times because the browser doesn’t have to style every single element.
