Log in

View Full Version : Resolved Style reset - specifying elements vs asterisk



Snookerman
01-10-2009, 09:03 PM
Hello everyone!

I was wondering why most style resets specify all the elements instead of just using an asterisk. Here is an example:
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ (http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/)

Now I'm sure there is a reason, but what is it? I've always used an asterisk style reset and haven't encountered any problems that I can think of.

Thanks!

jscheuer1
01-11-2009, 05:28 PM
In the example from your link, though a bit overdone (the guy must love to hear himself type), there are some style resets that would technically be invalid for for some elements. But even that shouldn't be too much of a problem. In most cases (if using just *) they will just be ignored for those elements that they don't apply to. Where they may cause a problem, they could be included only after the * declaration, and only for the element(s) to which they would apply.

However, to be on the safe side (if your object is the fullest possible compatibility), it can't hurt to write everything out, being as specific as possible. That way you don't have to test every browser in the world to see how it reacts to the * reset.

That said, I can think of no browser that would have a problem with it (the * reset), as long as things like border-collapse were reserved for table, etc., and perhaps not even that should be a concern.

Snookerman
01-11-2009, 07:01 PM
After a bit of searching and a lot of browsing through heaps of comments I have found some answers. The main arguments against the asterisk seem to be parsing speed (µs difference so not that important) and form elements. Apparently removing the padding and margins from form elements, especially the input element, can cause some problems. Some answers can be found in the comments of this article:
http://nettuts.com/html-css-techniques/weekend-quick-tip-create-your-own-resetcss-file/ (http://nettuts.com/html-css-techniques/weekend-quick-tip-create-your-own-resetcss-file/)

Regarding the example I posted, it's actually the most popular css reset. Google for "css reset (http://www.google.com/search?hl=en&safe=off&q=css+reset&btnG=Search)" or "style reset (http://www.google.com/search?hl=en&q=style+reset&btnG=Google+Search&aq=f&oq=)" and it's the first hit. Also, all the articles and tutorials that deal with style resets link to that one.

I also found some articles that are against resets, the first one somewhat advocating the asterisk reset:
http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ (http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)
http://snook.ca/archives/html_and_css/no_css_reset/ (http://snook.ca/archives/html_and_css/no_css_reset/)

I must say, I really don't know which way to go with this. I think that for now, I'll stick my * {margin:0; padding:0;} reset until I hit the wall with form elements.