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!
Using universal selectors slows down the parser. And while you are removing default style, why not remove all of it?
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?
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.
Wow Robert, thanks a lot.
That is going to help me out immensely!
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!
Here Robert, on your request:
my <code>initial.css</code> file explained. A good way to start CSS based design 🙂
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.
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.
Sudar,
I'm glad it helped! 🙂
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/…
Jens,
It's the best one, in my opinion! 🙂
Thanks for the link to Eric's article.
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.
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.
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.
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.
Hi
its a very useful tip Thanks!
Rahul Dev
<a href="http://www.katarey.com” target=”_blank”>http://www.katarey.com
Rahul,
I'm glad it helped. 🙂
Wow
Tanks!
I translate this post to persian.
This post in persian (Farsi)
Saeid,
Nice, thank you!