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!

Posted in CSS

19 Comments

  • Anne says:

    Using universal selectors slows down the parser. And while you are removing default style, why not remove all of it?

  • Robert Nyman says:

    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.

  • guywiththebike says:

    Wow Robert, thanks a lot.

    That is going to help me out immensely!

  • Robert Nyman says:

    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 body element 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 πŸ™‚

  • Robert Nyman says:

    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.

  • Sudar says:

    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.

  • Robert Nyman says:

    Sudar,

    I'm glad it helped! πŸ™‚

  • Jens Wedin says:

    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/

  • Robert Nyman says:

    Jens,

    It's the best one, in my opinion! πŸ™‚

    Thanks for the link to Eric's article.

  • Jim Cook says:

    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.

  • Robert Nyman says:

    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.

  • Jim Cook says:

    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.

  • Robert Nyman says:

    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

  • Robert Nyman says:

    Rahul,

    I'm glad it helped. πŸ™‚

  • Wow

    Tanks!

    I translate this post to persian.

    This post in persian (Farsi)

  • Robert Nyman says:

    Saeid,

    Nice, thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *