The most important CSS rule
I thought I’d share the CSS rule that’s most important to me (at least for the moment). Here goes:
*{
margin: 0;
padding: 0;
}Why do I love it? Since the universal selector (*) applies to all elements in the web page, hence removing all unwanted margins and paddings and helps me getting rid of inconsistent space and rendering in different web browsers and platforms. From there on, I totally control how code will handle every aspect of space (well, almost, form elements are still hell…).
I think the first place where I saw it was Eric Meyer’s web site, but I’m not sure of who wrote it first.
So if you aren’t using it already, I really recommend trying it out!
19 Comments/Reactions
July 15th, 2005 at 13:05
Using universal selectors slows down the parser. And while you are removing default style, why not remove all of it?
July 15th, 2005 at 13:13
Anne,
That was an interesting aspect! Personally, I’ve never experienced any performance problems when it comes to it. Do you have any examples where it’s noticeable?
Also, when it comes to removing it all, what other default styling do you have in mind?
July 15th, 2005 at 20:34
Robert,
That is indeed very useful. I also plan to use it in future projects.
But wouldn’t it also be useful to expand it even a little more, e.g. add color:#000 and background-color:#fff? Or even some other things, like default font or so.
I would also be interested in how far it slows down parsing a web site and if it is too long for the standard visitor.
July 16th, 2005 at 0:37
Wow Robert, thanks a lot.
That is going to help me out immensely!
July 16th, 2005 at 9:40
SilentWarrior,
Absolutely, things like background-color, color and their likes can also be added through it.
When it comes to font specifically, I tend to set that on the
bodyelement and let it be inherited down through the elements.If you look at my Find out the current Text Size setting in IE example, that’s how I usually apply the font.
When it comes to slowing down the parsing, it’s a valid question, but personally I don’t think it’s even noticeable. I know of many web developers out there that use this, and amongst these are a lot of the high-profile ones too, like Eric Meyer. So to me, it seemes like a well-tested and approved concept.
guywiththebike,
Thank you, I’m happy to hear that!
July 16th, 2005 at 12:09
Here Robert, on your request:
my
initial.cssfile explained. A good way to start CSS based designJuly 16th, 2005 at 12:53
Faruk,
Thank you!
SilentWarrior and others, Faruk’s post is a good example of how to attain a consistent cross-browser and cross-platform look.
July 18th, 2005 at 6:30
Thanks Robert.
I was really breaking my head to get a consistent cross-browser look and this tip really makes it easy for me to control every aspect using code.
July 18th, 2005 at 8:36
Sudar,
I’m glad it helped!
July 18th, 2005 at 9:51
That is my favorite css too
Eric has some more stuff that he is “undoing” in his article, but I mostly do not use that other stuff.
http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
July 18th, 2005 at 10:07
Jens,
It’s the best one, in my opinion!
Thanks for the link to Eric’s article.
December 3rd, 2005 at 1:13
I know I’m late to this party (by months) but I have to say implementing this rule has resolved a world of issues. I’m now staring at a layout that works in both Firefox and IE: styled menu lists, h1s, paragraphs, the works. Aaahhhhh!
My only frustration is that I didn’t catch on to this earlier. It’s not mentioned in the handful of CSS / Web Standards books that I have. It should be, and in bold face sized extra large too.
Thanks Robert. I’m emailing Santa of your good deeds right now.
December 3rd, 2005 at 11:56
Jim,
Ha ha!
Thank you!
I’m glad it helped you, although nowadays I normally use something more like Faruk’s CSS, just because of the talk of slowing web browser performance.
December 4th, 2005 at 6:05
Didn’t experience that at all. I’ve heard (or read) it suggested and watched for it in my tests. It must be a nanosecond lag. Nor have I seen actual measures reported, just the suspicions.
I’ve also read about the * rule interrupting the natural behavior of some form elements. I specifically dropped in all the inputs, selects and submits I could think of with no negative effects. I’d like to see an example somewhere.
December 4th, 2005 at 11:25
Jim,
When it comes to losing performance, I have no example. However, I’d love to see one, if it affects slow computers etc.
I haven’t regarded the form issue as a showstopper, either. Nevertheless, it’s not that a big deal to specify the tag names specifically, so I do it nowadays just to be on the safe side.
November 26th, 2006 at 9:28
Hi
its a very useful tip Thanks!
Rahul Dev
http://www.katarey.com
November 27th, 2006 at 14:15
Rahul,
I’m glad it helped.
January 13th, 2007 at 21:56
Wow
Tanks!
I translate this post to persian.
This post in persian (Farsi)
January 15th, 2007 at 9:09
Saeid,
Nice, thank you!
Write a comment
Twitter reactions