Grow your CSS skills. Land your dream job.

the * selector

  • # January 19, 2009 at 8:49 pm

    I am taking a class at a local college for css and my instructor had this to say about the rule

    * { margin: 0; padding: 0; }

    Quote:
    This seems like a great idea at first, but it is not universally considered the best practice. It messes up form buttons, takes longer to load, etc. Here is an article about this, for those of you who are interested. I don’t have time to research this more, but I welcome everyone’s comments and discussion here on the Bulletin Board. Also, please do not use methods like this in your assignments unless they are specifically assigned, because they may cause your file to format differently than what I am expecting for grading.

    From the reference below: "The other thing is the use of the "star-selector," or * { } in CSS. The star selector selects every single element, which produces an overkill of style-nullifying. Sander pointed out that Mozilla (for one) has a great deal of default styling on form controls, which the star selector nullifies when applying margin:0 and padding:0 to it. As a result, buttons don’t behave like buttons anymore, and so forth. … most of all the weblogs I frequently comment on have this same problem: buttons not behaving like buttons. In most cases, it was indeed the star selector being the culprit."

    "Additionally, Mozilla developers have stated that the star selector slows down things. While this is apparently not noticeable for end-users in most cases, it may slow down other aspects that interact with the CSS as well. And don’t forget that it’s definitely a bit overkill to loop through all elements when you only have to alter a dozen of them, roughly."

    What do you guys think of this?

    # January 19, 2009 at 9:40 pm

    I’ve heard the same thing. That’s why other resets exist:

    Yahoo Reset: http://developer.yahoo.com/yui/reset/
    Erik Meyer’s reset: http://meyerweb.com/eric/tools/css/reset/

    That perform a reset, but pick out specific elements to reset, rather than globally resetting all of them.

    "Additionally, Mozilla developers have stated that the star selector slows down things. While this is apparently not noticeable for end-users in most cases, it may slow down other aspects that interact with the CSS as well. And don’t forget that it’s definitely a bit overkill to loop through all elements when you only have to alter a dozen of them, roughly."
    I have heard this, and it makes sense.

    "Sander pointed out that Mozilla (for one) has a great deal of default styling on form controls, which the star selector nullifies when applying margin:0 and padding:0 to it. As a result, buttons don’t behave like buttons anymore, and so forth. … most of all the weblogs I frequently comment on have this same problem: buttons not behaving like buttons. In most cases, it was indeed the star selector being the culprit."
    I don’t think that this is the fault of using the star selector to remove margins and padding though… it’s simply that the web designer didn’t take the time to style the button element correctly.

    # January 20, 2009 at 12:35 am

    I dispute it entirely.

    I use it in every single project I do.

    The speed difference (looping through all elements) is absolutely not noticeable. Including a giant reset file on a page with a bunch of stuff in it that you don’t even use is more noticeable.

    It does not wreck default form elements, as it was written there. If you were to include border: 0; in with the margin and padding, that would wreck default form elements. Don’t do that.

    I am not closed minded on the subject though. If someone could show me a form element that has been foiled by a star selector margin/padding reset I’d be interested to take a look. Even better, some research data on it "slowing down" anything.

    # January 20, 2009 at 1:43 am

    I am with you chris. I love that strategy of reseting the margin and padding. I have seen it solve a few problems. I have given it out on this site as a solution and got a huge thank you for it. I will post your response in the school message boards for the instructor. I would like to see what he has to say about your thoughts. The school is PCC

    Rob
    # January 20, 2009 at 4:48 am

    I definitely use the * for smaller projects. I do prefer the more detailed reset from YUI though. But like Chris already said, I have never had any problems with the universal selector – and will continue to use it…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".