Which HTML5 reset CSS do you use and why?

CssHtmlCss Reset

Css Problem Overview


Which HTML5 reset CSS do you use and why? Is there one that you've found to cover more cases?

I've started using HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ It seems to work, but I'm wondering if there is something better out there.

Css Solutions


Solution 1 - Css

Real talk: Despite the markdowns kaikai is right, you only need to reset *padding & margin to 0.

Though unfortunately 99% of us do not have resources or man power to keep up with the hundreds of browser versions out there. So a reset sheet is essential for the typical website.

html5reset: (It's too interfering)

I just took a look at http://html5reset.org/

img,
object,
embed {max-width: 100%;}

And:

html {overflow-y: scroll;}

I understand it has good intentions but, that's not the job of a reset sheet. It's making too many assumptions.

BluePrint Reset:(literally a blueprint)

body {
  line-height: 1.5;
  background: white;
}

Whats up with 1.5. And why background white?(I know it's for correcting but still not necessary)

Normalize.css: (Not normal)

https://github.com/necolas/normalize.css/blob/master/normalize.css

It started good with some webkit/ie hacks but

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Every header tag is targeted. & they don't reset the line-height of the body.

I'm sure all the above does the intended job well, but will probably be overridden more than necessary.

Eric Meyer

YUI

HTML5Boilerplate

The above are more for pros with Boilerplate leaning to the (over friendly) side I'm sure due to popularity. At the moment 80% of my customized reset is boilerplate.

I'm going to go though all three bit by bit and make my own, it's not rocket science.

Solution 2 - Css

Normalize.css is great for both desktop and mobile browsers and is used in many popular HTML templates.

But what about using the CSS all property which resets CSS properties except direction and unicode-bidi? That way you don't need to include any additional files:

{
    all: unset
}

CSS all has wide support except in IE/Edge. Similarly with unset.

Solution 3 - Css

The reset.css used by Blueprint CSS framework works well and includes HTML5 elements. It gets included in their screen.css file.

Blueprint is a useful resource for rapid prototyping of new sites, and their source code is well organized and worth learning from.

Solution 4 - Css

Eric Meyer also released v2 of his CSS reset (and he did so almost a year ago now):

http://meyerweb.com/eric/tools/css/reset/

Solution 5 - Css

  1. Preserves useful defaults, unlike many CSS resets.
  2. Normalizes styles for a wide range of HTML elements.
  3. Corrects bugs and common browser inconsistencies.
  4. Improves usability with subtle improvements.
  5. Explains what code does using detailed comments.

normalize.css

Solution 6 - Css

* {
    margin: 0;
    padding: 0;
}

simple yet entirely effective. perhaps throw in a:

body {
    font-size: small;
}

for good measure.

Solution 7 - Css

The HTML5 spec includes recommended CSS declarations for CSS-capable browsers. For the fun of it I took them and reverted those, where it makes sense. You can view the result in this article.

However, I don't recommend using this in production. It's more a proof of concept and might better be used to give hints than to serve as an all-purpose-reset stylesheet. Any of the other suggestions before might be a better choice.

Solution 8 - Css

I use Normalize or the reset from HTML5 Doctor, and I alter it to fit the project I'm working on.

BTW it's only the concept of using a reset that's become more or less a standard.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDarryl HeinView Question on Stackoverflow
Solution 1 - CssfrontsideupView Answer on Stackoverflow
Solution 2 - CssMatt SmithView Answer on Stackoverflow
Solution 3 - CsscalvinfView Answer on Stackoverflow
Solution 4 - CssIlles PeterView Answer on Stackoverflow
Solution 5 - CsszzartView Answer on Stackoverflow
Solution 6 - CsskaikaiView Answer on Stackoverflow
Solution 7 - CssBoldewynView Answer on Stackoverflow
Solution 8 - CsscornishninjaView Answer on Stackoverflow