5

I am lost as to the reasoning behind most of the CSS reset style sheets (e.g., Eric Meyer's, Yahoo reset sheet). They essentially all do the same. However, what is the most efficient way to select every element on page?

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; }

vs

* { margin: 0; padding: 0 }

I can tell intuitively it is the latter, yet, all of those reset sheets use the former.

Gajus
  • 69,002
  • 70
  • 275
  • 438

3 Answers3

2

I would agree that The asterisk would be the most efficient. However after some research I found another post on this site about how harmful it can be to use the asterisk.

(why) is the CSS star selector considered harmful?

Community
  • 1
  • 1
Chillie
  • 1,030
  • 10
  • 28
  • 1
    I read than one a while back but as far as I could see it only discussed the issues in using `div.myDiv *` and not really `*`, please correct me if I'm wrong! – Filip Dec 13 '11 at 15:42
  • I agree with @Filip. The latter source mentions that CSS rules are read from right to left, therefore `div.myDiv *` is not efficient. However, it does make perfect sense to read from right-to-left `*` rule, when we need to select all elements. – Gajus Dec 13 '11 at 15:53
  • @Filip Either way, wouldn't it act the same? So if it does one thing for `div.myDiv *` it should act the same way by itself. – Chillie Dec 13 '11 at 16:01
  • No, I don't agree with you there. Since CSS is reading from right to left. If you have `div.myDiv *` it first has to check every element to see if they are actually a child of `div.myDiv` but when you use `*` the browser just need to do one check. – Filip Dec 13 '11 at 16:03
  • @ChillTech, you don't get it, don't you? `*` will select all elements in single query, from right to left. The list approach will make #[number of all HTML elements] queries to achieve the same result. How is that more efficient? – Gajus Dec 13 '11 at 16:05
  • @Guy do you mean how is the list more efficient? – Chillie Dec 13 '11 at 16:09
  • Exactly, how is the list more efficient? – Gajus Dec 13 '11 at 16:13
  • @Guy It depends on what you mean by efficient. With all the code out there you cant say ones more inefficient to write then the other one (copy and paste). If your talking length, I've seen CSS files extremely long, still readable, and efficient to use. If you mean for the browser to handle, I think anything that can tax the browser should be not be used if there is a less taxing way out there. – Chillie Dec 13 '11 at 16:31
0

If you really wanted to clear all margins on all elements, wouldn't performing the *{} be more efficient as it wouldn't need to perform as many checks either on the css rule (since you're specifying only one rule vs. 20 or 30 rules (one for each element) and when parsing your html to affect this rule, since it doesn't have to do a check to see if the rule applies since it's a * so it would automatically affect it to every element or node it finds?

Prusprus
  • 7,987
  • 9
  • 42
  • 57
0

It's not a performance issue, it's a compatibility one. You'll notice that not all HTML elements are included in that list. Notably, form elements such as radio and textarea are not included. This is because it is inconsistent how padding and margin are applied to these elements, depending on the platform, so it's best to leave the defaults in those cases. I found this forum thread that includes links to some discussions on the issue.

Nate B
  • 6,338
  • 25
  • 23
  • My intention is to reset margin and padding to all elements (see the heading). I've copy-pasted the first example from Meyer's example just as an example. – Gajus Dec 13 '11 at 15:49
  • Well then, go ahead and do it. It doesn't look like it would do anything harmful. I was just explaining why people might not use the asterisk. – Nate B Dec 13 '11 at 15:57
  • `this is because it is inconsistent how padding and margin are applied to these elements` is exactly why I want to reset them to `0`. – Gajus Dec 13 '11 at 16:02
  • No, what I mean is that `padding:0;` and `margin:0;` are what is applied inconsistently. So, when you use that asterisk, you still won't end up with a consistent result. – Nate B Dec 13 '11 at 16:05
  • How can `padding:0;` and `margin:0;` be applied inconsistently? – Gajus Dec 13 '11 at 16:07
  • I can't cite a specific example off the top of my head, but I know I've seen it happen when styling forms. For example, I'll apply a particular margin to a radio button, but some browsers apply it and others add few extra pixels. That's the inconsistency I mean. – Nate B Dec 13 '11 at 16:10
  • The thing you are referring to is `overflow` and unspecified dimensions issue with `input[type=checkbox]` and `radio` known to appear in `IE6/7/8`. This is not margin issue. – Gajus Dec 13 '11 at 16:13