Universal Selector ‘*’ Reset

When first approaching the CSS Reset method, it seems to many that the easiest way to reset styles is to use the “universal selector” to set the margin and padding on all elements to zero – as well as any other properties specified – with only a few lines of code. As you shall see, this pint-sized CSS Reset is fraught with problems…

At its most basic, the Universal Selector CSS Reset looks like this:

* {
	margin: 0;
	padding: 0;
}

This diminutive CSS Reset employs the universal selector (*) to reset the padding and margins on all elements to zero. It is often expanded to include border: 0; outline: 0 to also reset these values to zero, nada, zilch. The implications of this can be huge, and so this method should never be used unless you know exactly what to expect…

Click to jump to some code examples & scripts, or keep reading for some discussion…

The Universal Debate

The basic argument for using the Universal Selector CSS Reset is twofold:

• Considerably smaller than any other CSS Reset, coming in at a whopping 0.021KB, compared with 0.5 – 15KB for some other CSS Resets.
• Addresses any new elements as and when they are added (for example, if Internet Explorer were to start automatically adding arbitrary padding to the HTML 5 <canvas> element in the latest version) – and there’s no chance of missing anything out.

However, the counter-arguments for this method are clear:

• No control over exactly which elements are reset – every element used in the document must now have its margin and padding set explicity, plus any other properties such as border and outline that may be included in the reset (see the extended version below).
• Wave goodbye to inheritance of CSS rules from parent to child elements – the universal selector wins out every time (see note on inheritance, below). So not only must every element be defined after the reset, but child elements now cannot inherit each element’s properties, and so they must also be explicitly defined. The amount of code this requires may even negate the size-savings from the minimal CSS Reset!
• According to the universal declaration, a browser must run through every element on the page and apply the universal rule: elements, their children and great-great-great-grandchildren all alike, and some claim that this may be a huge hit on resources and page load times (this point is debatable for modern browsers.)
• Also – and this might be the deal-breaker for many – Internet Explorer 6 and 7 don’t support the universal selector.

Watch out…

If you’ve been paying attention, you’ll immediately see the potential dangers of using this form of CSS Reset.

If you zero the margins, paddings, borders and outlines on all elements, you can say goodbye to your <input> elements – text and select boxes say goodbye, and submit buttons are no-more. Sure, browsers all render these differently, but there is a good case for leaving them be (blog post on this topic coming soon!).

This might be what you want – if you’re crafty with your CSS, you can create fairly nice submit buttons that look the same in all browsers (tutorial coming soon). If that’s the case, it’s still definitely better to directly target these elements, to make your code more readable and intelligent.

A note on inheritance

As mentioned before, you can also kiss goodbye to inheritance. The universal selector trumps any form of inherited style – so, for example, if you set the line-height on a particular <div> to 1.0em, then place a <p> inside, that paragraph will not inherit its parent’s line-height as you might expect. The * { line-height:1.4em } rule is matched instead, and trumps the div { line-height:1.0 } rule. This can be a great source of frustration in the long term.

Summary

The Universal Selector Reset seems to be a case of throwing the baby out with the bath water, a sort of “slash and burn” method of controlling the cross-browser CSS experience, at the opposite extreme of such detailed and comprehensive Reset scripts as the Tripoli Reset.

Somewhat alarmingly, the Universal Selector Reset is still one of the most commonly used methods today, alongside Eric Meyer’s “Reset CSS” – and although many developers and designers will defend it to the hilt, the arguments do seem to speak for themselves.

Nonetheless, here it is, in various versions, with a little more analysis below:

Code Examples

Here’s a simple example of the Universal Selector CSS Reset that ‘resets’ the margin, padding, border and (oft-elusive) outline properties on all elements:

/* cssreset.com */
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

The above script can be made more comprehensive by adding extra properties, for example:

/* cssreset.com */
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	line-height: 1.5em;
	text-decoration: none;
	vertical-align: baseline;
}

Before using these CSS Reset scripts, please do check out the discussion above, to make sure you make the most informed decision possible.

CSS Reset Suggestions

Designers and developers should at least explore all the options, then experiment and test different methods, before deciding to use the Universal Selector Reset. As a copy/paste method, it is definitely lacking in many areas where more specific project-driven CSS Resets are not.

Still on the fence about which method of CSS Reset to use? While the Universal Selector Reset method may not be recommended here, there are plenty of scripts that are. Check out the CSS Reset Scripts index page for more discussion, downloads and examples.