Why write all the tags to assign one style is better than using universal selector (*)? [duplicate]

Question

Possible Duplicate:
Why don't CSS resets use '*' to cover all elements?

I'm doing a page that have a lightweight HTML.

I have seen gurus saying that universal selector is a bad thing and is better to use like that (From: http://meyerweb.com/eric/tools/css/reset/):

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Using universal selector:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Why universal selector is a bad thing?

Considering the performance for page load I prefer the universal selector. Is there other thing that I'm not considering?

Answer 1

• universal-selector has very low precedence over other defined rules..

  One reason is that the universal-selector has very low precedence and can't "overwrite" values defined by a more specific selector, see the below example.

  Even though we'd like to "reset" all elements background-color to blue the selector using div is a better fit and will be used instead, even though * is declared later.

    div {background-color:red}
    *   {background-color:blue}

---

• Using the universal-selector won't grant you the control you might want..

  Using the universal-selector will not provide any control over which exact elements that will actually have the properties set, it's easier to remove/add elements from/to an explicit list than there is to write CSS to not reset certain items.

---

• Using the universal-selector is apparently very slow

  You mentioned the time it takes to load a page and sure it will be faster to download the resources required if you write one character (*) instead of many more (using the alternative and recommended reset), but downloading content isn't all there is to how fast a page will render.

  As written by the Mozilla Developer network regarding universal-selector:

  Note : Authors are discouraged from using the universal selector as it is the most expensive CSS selector in terms of Webpage Performance.

  You can read more about the expensiveness of the selector by following these links:

  • developer.mozilla.org - Universal Selectors - MDN
  • stevesouders.com - Simplifying CSS Selectors

Answer 2

No control over exactly which elements are reset – every element used in the document must now have its margin and padding set explicity, plus any other properties such as border and outline that may be included in the reset .

Wave goodbye to inheritance of CSS rules from parent to child elements – the universal selector wins out every time. So not only must every element be defined after the reset, but child elements now cannot inherit each element’s properties, and so they must also be explicitly defined. The amount of code this requires may even negate the size-savings from the minimal CSS Reset!

According to the universal declaration, a browser must run through every element on the page and apply the universal rule: elements, their children and great-great-great-grandchildren all alike, and some claim that this may be a huge hit on resources and page load times (this point is debatable for modern browsers.)

Internet Explorer versions up to and including 6 exhibit the star HTML selector bug: selectors that should fail, don’t. A descendant selector, such as * html, shouldn’t match any elements, because the html element is the top-most parent element and, as such, it can’t be a descendant of any other element. However, Internet Explorer versions 5.5 and 6 ignore the universal selector at the beginning of this selector.

When the universal selector is immediately adjacent to an element type selector, Internet Explorer versions 6 and 7 will interpret the combination as a descendant selector instead of failing as they should. In Internet Explorer 6 and 7, this selector will also select some inappropriate SGML elements such as the doctype declaration and comments.