Why You Should Use CSS Reset

CSS Reset is a block of CSS code that sets the baseline for any HTML document so that your design remains consistent regardless of your Browser. By default every single web browser uses different web agent stylesheet that uses certain style attributes in case if there is any CSS file or CSS properties are missing on any given web page. This creates a problem for web pages.

A very good example could be creating a web page with simple HTML element and not using any CSS Reset code. Create a div element and assign a class or ID, then style it to have 1 pixel of solid border all around and then set "float" value to be "left" or "right". You can simply copy the following code and save it on an HTML file. Open up the page with your browser.

<!DOCTYPE html>
<title>My Page</title>
<style type="text/css">
.wrapper {
   width: 200px;
   border: solid 1px red;
   float: left; }
   <div class="wrapper">

You should see empty space in between the border of your div element and the edge of the browser regardless the fact that we instructed the div to be all the way left of the screen. That should not leave any space on top or on left side because nothing is there anyway. This is exactly where the CSS Reset comes in. CSS Reset creates a baseline for any design to be visible the same way across different web browser. It also eliminates any default settings of your browser agent.

Should I Use it?

Absolutely, fact of the matter is most modern website uses CSS Reset. It could be on an external file or could be on your site's main style.css file. Obviously that depends on the preferences of the designer. I personally use it on my main stylesheet file. The logic behind is to reduce the number of https request and also to keep them organized and check if anything requires special attention while coding.

Watch Out

Using CSS Reset has its own benefit but if you are not being careful enough, you might end up creating a bigger mess. If the Reset code sets a certain value an specific HTML element and your are re-declaring the same element on your CSS it will be overwritten. This is not a good practice or not being efficient.

To avoid such collision, I would recommend you to use popular CSS Reset on your main style.css file. This should help you to maintain a certain standard rather than overlapping them with your own codes.

Popular CSS Reset

There are number of CSS Rest code available out there and few of them are really popular. I found following Reset's to be really good.

I highly recommend you to use HTML5 Doctor's Reset code as it is built on Eric Meyer's code and has been updated based on HTML5 Elements.


Commenting is disabled.