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

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

speed is a con, however slight the impact, using a global style sheet (*) applies the attributes to EVERY element possible, even if you are not using one or more

Answer 2

for browser there are some default margins and padding and they may be another for each element (for example another for li and for input) depending of browser. reseting this value will make you sure that in each browsers for all elements margin & padding are 0

Answer 3

I don't see too many cons. I think using a really robust CSS reset is essential these days if you are running your site in multiple browsers.

The problem some of the time is that different elements such as p, h1,h2 etc are all affected by line-height, font-size etc, so just doing padding:0 and margin:0 won't guarantee a full reset.

Hope this helps.

Answer 4

The cons for a global reset are more based on your own personal setup. You can also edit someone else's reset as long as you credit them.

Cons: I created my own reset way back when and made mistakes that I had to go back over and remove. Hence if you use someone else's reset and it contains something you didn't expect you might 'lose functionality' on some objects that you were used to. This can be remedied by erasing the offending reset if you need to.

Pros: I've been working with resets for almost a year now and I like it a lot. I really don't notice any performance issues and nothing surprises me about the way elements display, and I don't have to do stupid stuff like setting the margin/padding of the body and html to 0 whenever I build a new site.

Answer 5

Eric Meyer's CSS reset is not only to remove padding and margin, but to make default styling consistent across browsers. Many of the style rules reflect that fact. I don't know which elements are not included in his reset by default, but I can say that the particular reset you posted does contain many revisions to ensure maximal compatibility across browsers.

As for speed, if the speed of cascading < 100 styles through your site is what makes or breaks your performance, you probably have deeper issues at hand. Make sure that as many files are cached as possible and don't sweat a few extra CSS rules.

Answer 6

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?

Answer 7

The difference is miniscule, but the "star rule" actually takes longer to process as it goes through each element, applying (or in this case removing) the default styles.

Resets like Eric Meyer's target elements specifically, meaning slightly less processing time.

Answer 8

Dont use resets.

Resets are really annoying to fellow and future developers.

When I add a h1 tag I expect a margin and padding on it. When I add a p tag I expect space between each paragraph.

Its really annoying when people remove all of this. I end up having to go back look at their reset figure out which of the billion terrible ones out there this developer decided to use and then more then likely change.