{Carrer web log} ←

CSS Mini Reset

Thursday, May 20, 2010 { 25 Comments }

What is CSS Reset?

CSS Reset usually aims to reduce browser inconsistencies by evening up the CSS default settings in all browsers.

The most used CSS Rests are

• Eric Meyer CSS Reset


• YUI Reset


• And other ..

Last week I spotted "CSS Reset – a simpler option" by Russ Weakley.

Russ made few smart observations: we don’t always need complete CSS reset because CSS Reset file can become very large and we often forget to set all the styles.

Also in my opinion we don’t always use all the CSS and HTML tags, when was the last time when you used “address” tag?

In many cases the complete CSS Reset makes perfect sense like in the case of some CSS Framework.

I used Eric Meyer Reset for my CSS Framework (Emastic and The Golden Grid).

In other my project complete CSS reset doesn’t make sense (Malo, Formy, 1 line CSS Framework).

My point is different projects(sites) can be approached differently, and not always we need complete CSS reset.

I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.

And here is the result:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

You can compare:

• Eric Meyer CSS Reset


• YUI CSS Reset


• CSS Mini Reset

You can use CSS Mini Reset when you actually don’t want to reset everything just the fundamental HTML elements.

Fork - Download CSS Mini Reset on github

Any suggestions?

25 Responses to “CSS Mini Reset”

1. //  Unknown // 5/20/2010

   I agree that less is sometimes best for resetting CSS. I have my own customized reset I use specifically when working on CSS for sites using our Content Management System.
   
   My guess is that other people will start coming up with their own resets as they start to figure out what elements they use the most.
   
   Great post!  

2. //  Anonymous // 5/20/2010

   It's definitely missing "body background"  

3. //  Vladimir // 5/20/2010

   @Anonymous:
   This is not complete reset, this is more structural reset. It resets only the skeleton of the web structure. If you are more fan of typographical reset here is one http://code.google.com/p/azbuka/ that I made. Or the big list of many different resets http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/.  

4. //  luminarious // 5/20/2010

   I am a simple man and I like using the tiny reset:
   
   * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0; padding: 0; margin: 0; }
   
   It may not be perfect, but it's good enough for 94% of what I do.  

5. //  Tony Dunsworth // 5/20/2010

   I will agree with Kristy. I write my own resets based on what I am doing and what I need in it. I think that this is a great place to start thinking about that. Thanks for sharing it.  

6. //  Marge-Bob // 5/20/2010

   I like the idea of this reset, but it's missing content tags. But I wonder if that's because those tags are actually the same across all browsers? For good measure I might throw in:
   
   p { margin-bottom: 1em; }
   
   I had planned on writing more...but in fact, that's the only block-level content tag in HTML4 other than UL (which I need to research more before resetting).
   
   I'm planning on rewriting a legacy stylesheet and I think I'll use this wonderful mini-reset. Thank you!  

7. //  J. // 5/20/2010

   @author : The only thing i would add to your reset would be the all around list <ul> in the first part of your css (padding and margin to 0)
   
   @luminarious : Its a pretty convenient reset for short pages, in some case, where you have long pages, your reset will slow down the render of the css of your whole document since the universal selector (*) force the browser to cycle through all HTML tags  

8. //  Anonymous // 5/20/2010

   @luminarious
   
   * selector for everything?! no no no...this is just lazy and bad  

9. //  Rahul - Web Guru // 5/20/2010

   Thanks for this simple CSS reset. Tweeted. ;)  

10. //  Corey Ballou // 5/20/2010

    I'm a personal believer that you should always take out those ugly outlines by default. I also recommend collapsing your table borders to avoid double border issues.  

11. //  Rizza // 5/21/2010

    I like your CSS mini reset, but to me its better to add this.
    ul, ol {list-style:none;
    a {text-decoration:none;}  

12. //  Andrew Worcester // 5/21/2010

    I would suggest also adding support for li, ul, and ol. They are pretty commonly used on most sites I would think.  

13. //  Vladimir // 5/21/2010

    @Rizza & @Andrew Worcester
    I deliberately choose not to reset ul,ol,li. This decision is mainly motivated to keep CSS Mini Reset as small as possible and to reset only the structural elements. Feel free to change this.  

14. //  Anonymous // 5/21/2010

    This simple reset doesn't make vomit.  

15. //  Ethan // 5/22/2010

    I think the idea of finding a smaller reset is misguided in almost all cases. When you gzip and minify your CSS, the performance difference between resets is incredibly minimal (even if you count the few extra milliseconds that it takes the browser to apply the additional rules found in more complicated resets).
    
    And, for that negligible loss in performance, you get a lot of convenience. The writer asked (rhetorically) when I last used an address tag and, while I don't use them often, I happened to use one today. Had that caused problems, it would've taken me time to fix and, ironically, adding the tag to the reset would invalidate the stylesheet, so users who had it cached would have to redownload it. Even if only a small percentage of users had it cached, the cost of downloading an entire new file could outweigh the performance gained initially.  

16. //  Ethan // 5/22/2010

    This comment has been removed by the author.  

17. //  Vladimir // 5/22/2010

    @ETHAN : Don't get me wrong I have nothing against the complete reset. I think that there is no write or wrong Reset and is totally OK if you even don't use CSS Reset at all. With Mini CSS Reset I wanted to "fix" only the most critical fundamental parts of the CSS.
    
    It is not all about the performance for me is like when you build a building if the main structure is solid the building will hold even if there is small earthquake.  

18. //  proghead // 5/22/2010

    Until HTML 5 is supported everywhere i like to add rules for the new elements to my reset styles.  

19. //  Vladimir // 5/22/2010

    @proghead: Thank you for sharing  

20. //  Beben Koben // 5/22/2010

    salom from bandung blogger Indonesia...
    my first landing heres...:P
    your article greats, nice to meet you brother ^_^'  

21. //  franklyn // 5/25/2010

    this is great. thanks for sharing.  

22. //  Unknown // 5/26/2010

    No reset style-sheet is perfect, but this mini-reset topic is quite interesting. Thanks for this post.  

23. //  George G // 12/05/2010

    I will have to try this. I am a designer that has to have everything line up perfectly. So much so, that lately I have gone back to tables on some sites (instead of div's). Web design is difficult when you have to take in account for 800x600 with IE6.  

24. //  ghazals sms // 9/16/2011

    i really like this post thansk for sharing my comment  

25. //  giveaboneadog // 2/06/2013

    Great stuff, I think resets should be done on a per-project basis, but of course, you don't always have time for that..
    
    Here is my starting reset:
    
    *{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    }
    
    I personally couldn't live without it. Not literally.
     

Post a Comment

<< Home