Question

What are cons of global css reset * { margin: 0; padding: 0; }?

What people prefer eric meyer css.

This is eric mayer css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Isn’t it bit specific and heavy. I never use many elements which is in this rest like blockquote and caption.

Update:
and eric reset resetting 9 properties for 58 elements. isn’t it also slow same like people talk about global reset.

What are cons to use this

* { margin: 0; padding: 0; }
select { min-width:1.5em; }

Answer 1

The problem is that there are some elements that need margins and/or padding to display properly, and people forget to set them back. Also, for many elements, you are going to be setting your own styles, overriding the reset, so the reset is redundant; you should instead just set the styles the way you want them.

One problem I see a lot is with lists. If you blindly apply a reset, the bullets for the list will appear outside of the containing element, which always bothers me:

    +--------------------+
    | Some paragraph,    |
    | with text.         |
    |                    |
   *| One                |
   *| Two                |
   *| Three              |
    +--------------------+

Perhaps some designers are deliberately doing this, but I think a lot of the time I see this, it’s because someone has blindly applied a reset and not thought about what it would do to the indentation of list items. If you look for this, you will see it all over the place; and pretty much invariably, the site you see it on uses a CSS reset. For more information on how to format lists correctly, see Consistent List Indentation on the Mozilla Developer Center.

Another problem is that after doing a reset, there are sometimes obscure elements that people don’t remember to apply margins back to. For instance, the <dl> element; it’s default style isn’t great, but it at least lets you distinguish between the <dt> and <dd> elements within them. If you apply a reset, you lose that and wind up with everything crammed together with no distinction. Stack Overflow’s reset does this, for instance, making <dl> elements pretty much useless:

Term

Definition

Term

Definition

Stack Overflow’s reset also lacks any top or bottom margins on the <dl> element, and only a bottom margin to <p>; so I had to add an extra <br> in order to prevent the above <dl> from running up against this paragraph.

If you do use a reset, be very careful to make sure that all HTML elements do display in a sensible way. And remove the parts of your reset that are overridden by later rules that you add; there’s no real reason to reset <b> and <i>, and then later apply font-weight and font-style to them, and if you reset a margin to 0 and then set it to 2 em, then why not remove the reset to 0?