Something that has become nearly ubiquitous in contemporary Web design is the use of Cascading Style Sheet (CSS) “resets.” The basic premise behind the use of these blocks of CSS is to force a clear, or reset, of browser-imposed CSS rules to essentially start with a blank slate. Most widely available CSS resets include the code to clear the borders, margins, spacing, padding, alignment, and backgrounds of all valid XHTML elements, and CSS resets specific to establishing backwards-compatible HTML5 are cropping up.
How CSS Resets Work
Every browser that has been released since the advent of CSS usage for HTML page formatting and styling imposes its own default stylesheet on Web pages. The obvious advantage to this is that it isn’t necessary to include basic styling in your CSS code for things like bolding text between <strong> tags and indenting unordered list items with bullets–these formatting elements are done through the browser’s built-in stylesheet.
Problems arise when different browsers operate with different default CSS definitions–which they most definitely do. Admittedly, the basic stylesheets are so general as to be relatively consistent. You will not find, for example, one browser that styles all <span>s as high-level block elements with a min-height of 300px. However, you may find that one browser indents <li>s slightly further or closer than another browser. If your goal is virtually pixel-perfect cross-browser experiences for your visitors, this presents a definite obstacle.
CSS resets are the way to overcome it. By redefining all elements to have their properties reset to “0” and “none” and the like, you are able to ensure whatever self-imposed stylesheet a browser uses by default is overridden. If you chose not to set a certain property later in your stylesheet, you can rest assured that even if ignoring it worked in your browser without issue, another browser hasn’t applied styling you overlooked.
CSS Reset Pros and Cons
The main advantage to using CSS resets prior to applying your custom styling is obvious: it’s much easier to start with a blank, clear slate and build upon that than to dig around thoroughly for any blips between default browser stylesheets that weren’t obvious at first glance. If everything is overridden and set to zero, the only formatting that will be applied is the code you explicitly write.
Another advantage is by resetting everything from the start, you can condense your CSS markup. It’s very easy to get out of hand declaring margin: 0; and border: 0; for separate elements all throughout your stylesheet, either from overlooking the ability to combine property definitions for multiple elements (i.e. input, textarea { border: 0; }) or from the fact that you are simply not realizing how often you need to reset the defaults for different elements as you go about cross-browser testing. By resetting everything at the start of your stylesheet or by including a separate reset-specific stylesheet first, you cannot overlook a property that throws off your design between two different browsers, and you will not wind up rewriting “0” properties endlessly.
On the other hand, a reset isn’t always necessary. If it isn’t critical that formatting be pixel-perfect consistent across platforms, including CSS resets in your markup can add excessive, unnecessary code. For example, if your design is exceptionally minimal and relies on manipulating nothing more than link colors and font sizes with no graphical elements, chances are using a reset would be overkill. If margins and spacing vary slightly from browser-to-browser, it’s quite likely you won’t even notice, let alone have to correct for differences.
Using Resets with HTML5
CSS resets are an excellent way to improve the display of HTML5 markup in older browsers that wouldn’t otherwise recognize block elements like <section> and <nav>. For example, defining an element’s properties thusly:
section {
display: block;
border: 0;
outline: 0;
}
is an excellent way to instruct a browser that doesn’t recognize the <section> tag to treat it as a block element, like a <div>. You may still require some JavaScript to fully render HTML5 as backwards-compatible in non-supporting browsers, but the simple CSS code will go a long way on its own.
Further Reading
Now that you have a basic understanding of why you should be using CSS resets in your design, here are some additional resources on the topic:
Helpful blog, bookmarked the website with hopes to read more!