It became necessary to destroy the village in order to save it.
Unidentified US Army Major
Each browser inevitably has slightly different default values for appearance when displaying some tags. For example, the default body margin amount is different by 1 pixel between Internet Explorer and other browsers; Firefox will place a space between the top of an <h1> element and the top of the page (assuming the <h1> is the first element in the page), which follows W3C specifications, but IE will not.
In response to these inconsistencies, some web developers have developed “CSS Resets”, a series of style declarations that are intended to “wipe the slate clean”: setting the CSS back to a base layer of default values that are shared between all browsers.
Eric Meyer’s CSS Reset is probably the most well-known attempt at this, although Yahoo’s YUI reset is also well-regarded. Many CMS’s and frameworks, such as Wordpress, also employ a CSS reset before applying themes.
Personally, I consider most CSS resets overkill, the equivalent of flattening a building in order to redesign it. CSS reset files tend to be rather long, which increases file size, and the process of building up styles from the state of CSS left after a reset can be arduous. In addition, CSS resets tend to more focused on setting IE straight, which I would tend to deal with using a conditional comment. Finally, one can become so obsessed in making every browser “the same” that the design itself suffers: flexibility in the appearance of content from device to device is a feature of the web, not a bug.
That being said, there are a few declarations I typically make in a stylesheet that could be considered a “mini-reset”, as the first declarations:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, figure {
margin: 0;
}This makes sizing elements far easier, while allowing you to overwrite the rule if need be. I also reset <body> and <figure> margin to 0.
This minimal reset allows me to build my CSS without backtracking, avoiding moments of “Oh, I meant to do that”, or the tendency to add “fixes” for individual selectors.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
