Question

At the moment I am just resetting the styles I need at the top of my style-sheet, like:

html, body, div, fieldset, form, h1, h2, h3, h4, p, ul, li {
    margin: 0;
    padding: 0;
}

However, I have seen a lot of times that people use:

* {
    margin: 0;
    padding: 0;
}

That does seem to make things easier, but somewhere else (don´t remember where...) I read that using the * selector seriously affects performance.

Is that true, does a long list of selectors (the example just has a few selectors, it could be more) perform significantly better than the * selector and are there perhaps other disadvantages to the * selector?

Was it helpful?

Solution

I once ran some benchmarking and the *{} reset did not run any slower than the resets - Meyers, YUI and no reset at all.

The main problem with the *{} reset is that it resets the padding on the input buttons for most browsers but IE keeps some of its padding making it very hard to consistently style the buttons cross-browser.

OTHER TIPS

Why not use one of the standard CSS reset files such as Eric Meyer's or YAHOO's?

Via Google's Speed Recommendations, the wildcard selector is very inefficient. Plus, in the future you might have boxes that you don't want to be reset. By naming each one individually, you get both efficiency and control.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top