0

Possible Duplicate:
why don't css resets use '*' to cover all elements?

Currently I use:

*{
    margin:0;
    padding:0;
}

But I am not sure why people keep using:

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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
}

Is there any particular reason why most of the sites (including this one) is using the second method?. There must be a very good reason to increasing the CSS file-size like that

Community
  • 1
  • 1
mithril333221
  • 799
  • 2
  • 9
  • 20
  • @sandeep No it's not. That's asking when to use `*`, not why to use `html, body, div, ...` instead of it. – Andrew Marshall Mar 05 '12 at 18:30
  • @sandeep: No, that question doesn't ask anything about the use of a long chain of type selectors in a CSS reset. – BoltClock Mar 05 '12 at 18:30
  • 2
    @RobW: That article says `It applies to CSS for XUL code, not for general-purpose HTML pages; see the main CSS section for information on general-purpose CSS.` – Billy ONeal Mar 05 '12 at 18:31
  • 1
    @Billy ONeal: Exactly. I wish they would break that redirection from *Writing Efficient CSS* to *Writing Efficient CSS for use in the Mozilla UI* already. – BoltClock Mar 05 '12 at 18:33

2 Answers2

2

I would actually disagree that most web developers make a long list of element selectors like that. In fact, web developers all have different views on what is the best way to reset CSS.

For instance, the "Tripoli Reset" uses the universal selector *.

This article details only a handful of ways to reset CSS.

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

One reason to be more specific I think is performance as the above answers mentioned (albeit modern browsers nowadays are pretty fast at parsing CSS). Furthermore, developers can also more specific if need be. For instance, some CSS properties such as border-collapse only apply to specific types of elements.

dangerChihuahua007
  • 20,299
  • 35
  • 117
  • 206
-1

It is a performance issue. I strongly recommend you read the work of Steve Souders who has done extensive benchmarking and analysis when it comes to high performance front-ends. Essentially, the browser has to do a lot of mining and analysis of the DOM when you use the * operator, whereas if you explicitly specify the operators it does not have to do that.

It is very similar to doing a SELECT * vs doing SELECT id in a SQL query. If you do SELECT * there is an additional overhead while the database looks up the column names. Same thing with this.

For an example of Steve Souders work on this read this.

christophmccann
  • 4,181
  • 7
  • 42
  • 66
  • 1
    If you recommend reading something, then link to it! – Andrew Marshall Mar 05 '12 at 18:28
  • or you could just use Google.... – christophmccann Mar 05 '12 at 18:31
  • 3
    Anecdotal and statistical evidence has shown that half of the question askers on Stack Overflow don't use Google, so they'll be SOL here. – BoltClock Mar 05 '12 at 18:32
  • Is this performance difference significant in comparison to the increase in bandwidth use to send the larger CSS file? – Billy ONeal Mar 05 '12 at 18:32
  • There are numerous articles on his site—you clearly know of one (or more) talking about this issue, but I don't, so link to it for everyone. – Andrew Marshall Mar 05 '12 at 18:34
  • If anything, the first article I find by Steve Souders says the exact opposite of this answer: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ – Billy ONeal Mar 05 '12 at 18:38
  • @BillyONeal the performance gained might be outweighed on a small site by the extra bytes added to the CSS file. However, if you consider a larger site with lots of HTML elements then the gain can be significant. – christophmccann Mar 05 '12 at 19:01
  • @AndrewMarshall fair enough - answer amended to include link – christophmccann Mar 05 '12 at 19:02
  • @christophmccann: The article you linked to really doesn't apply to the question; of course in the case where * is being applied to find one element the time might be large. But here, the style gets applied to pretty much every element in the page anyway. – Billy ONeal Mar 05 '12 at 19:16