CSS Reset for HTML5

CSS reset for HTML5

The comments on that post are crazy. You're certainly not going to find a more thorough discussion.
I think you should delete unnecessary rules and deprecated tags from whatever reset you've been using and keep truckin. Paul Irish (jQuery core contributor, co-creator of Modernizr and now Googler) has a comment in the article you link to that has all the HTML5 specific CSS leveling you're likely to need:

article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; zoom:1; }

Google's using a simpler version in their base.css on HTML5Rocks.com:

section, article, header, footer {  display: block; }

You'll still need to use Remy Sharp's simple, bare-bones HTML5 Shiv or Modernizr to run a JavaScript loop to enable styling of new HTML5 elements in IE. HTML5 Shiv just creates the elements to allow styling, Modernizr is a much more full-featured HTML5 and CSS3 detection/styling solution. There's another great post on HTML5 Doctor worth a look, How to use HTML5 in your client work right now from March 2010, co-written by Remy and Richard 8 months after the reset article. They mention using Modernizr "to detect Web Forms 2.0 and other HTML5-type support."

Also, Dion (from Ajaxian and now Palm) tweeted about css3pie that will render visual elements like border-radius, box-shadow, and gradients in IE. Can't vouch for it myself.

(I had more links in here but had to remove all but one b/c my rep. is < 10, if there's something you can't find. reply and I'll post it.)

html5 reset css tips - with and without universal selector

I had the same question, so I searched it out and found this article:

http://www.cssreset.com/what-is-a-css-reset/

Which states "If your CSS Reset isn’t carefully written, you might find that your CSS rules are being themselves overwritten by the code that was supposed to be their baseline! This is often a problem when using the Universal Selector Reset, but won’t generally be an issue if working with well-written code such as the HTML5 Doctor CSS Reset."

Hope this helps!

How to reset all default styles of the HTML5 button element

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

add this one also in css it will solve your problem.

How to reset/remove CSS styles for a specific element or selector only

The CSS property all has a keyword initial that sets the CSS property to the initial value as defined in the spec. The all keyword has broad browser support except for the IE and Opera Mini families.

/* basic modern patch */

#reset-this-root {
    all: unset;
}

#reset-this-root {
    all: initial;
}

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

Relevant GitHub repo with a December 2017 more exhaustive list
Related
Related from MDN
Related W3C specs

With all this said, I don't think a CSS reset is something feasible unless we end up with only one web browser, if the 'default' is set by browser in the end.

CSS reset - What exactly does it do?

In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.

If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.

Have a look at this article Should you Reset Your CSS?

HTML5 Boilerplate and 960.gs should I include reset.css?

You should not use both Normalize and CSS Reset.

Normalize will make sure all your browsers display elements similarly without removing the "Default styling" from them. (like bullet points and paddings/margins for list items and lists)

I've used both for many years and I recommend Normalize as it's a less "agressive" method of cross-browser CSS "normalizing". A CSS reset will make all values 0 or none and you will often need to re-add the styling yourself.

You should also have a look in the Yahoo CSS reset ( http://yuilibrary.com/yui/docs/cssreset/ ) which introduces the concept of "contextuality" in the reset; basically you can reset only some elements with the use of classes to limit your scope.

Is this CSS Reset okay?

I generally think that wide-ranging CSS resets are not the best. I agree with Russ Weakley, who "zeroed" in on three big concerns:

Every element that's reset must be redefined. CSS file size & maintenance can increase.
You could forget to restyle something you reset.
Some resets are harmful to users who rely on keyboards for navigation.

See his whole presentation here: http://www.maxdesign.com.au/articles/css-reset/

Specifically, I think the following should not be reset, as it is in your stylesheet

:before, :after {
    content: '';
}

:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

focus is an accessibility issue.

ol and ul should have their default styles. You are likely to need them. (Although you may need to overwrite them for a nav.)

:link, :visited, :hover, :active I would reset these only as needed.

As mentioned and acknowledged by you *{ // } could cause performance issues and may cause unforeseen issues.

Also, I would consider adding something to reset the big top and bottom margins on headers

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}

CSS Reset for HTML5