Menu
I'm trying to find some simple client-side performance tweaks in a page that receives millions of monthly page views. One concern that I have is the use of the CSS universal selector (*).
As an example, consider a very simple HTML document like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
The universal selector will apply the above declaration to the body, h1 and p elements, since those are the only ones in the document.
In general, would I see better performance from a rule such as:
body, h1, p {
margin: 0;
padding: 0;
}
Or would this have exactly the same net effect?
Does the universal selector perform more work that I may not be aware of?
I realize that the performance impact in this example may be very small, but I'm hoping to learn something that may lead to more significant performance improvements in real-world situations.
I don't intend to override the styles in the universal selector rule with other styles later in the document - i.e., using it as a quick and dirty reset stylesheet. I'm actually trying to use the universal selector exactly as I think it's intended - to apply a rule set to all elements in the document, once and for all.
Ultimately, I'm hoping to determine if there is something inherently slow about the universal selector, or if it just has a bad rap due to rampant misuse. If * { margin: 0; } is literally equivalent to body, h1, p { margin: 0; }, then that will answer my question, and I'll know to go with the former since it's more concise. If not, I want to understand why the universal selector performs more slowly.
266
The CSS universal selector ( * ) matches elements of any type. Universal selectors can be namespaced when using @namespace . This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.
In modern browsers the performance impact is negligible, provided you don't apply slow-effects to every element (eg. box-shadow, z-axis rotation). The myth that the universal-selector is slow is a hangover from ten years ago when it was slow.
Class-selector: The class selector selects HTML elements with a specific class attribute. Output: 4. Universal-selector: The Universal selector (*) in CSS is used to select all the elements in a HTML document.
The universal selector becomes helpful when you wish to put a specific style in all the HTML elements within your web page. It can also be used for every single element that is within the element of your HTML page.
In modern browsers the performance impact is negligible, provided you don’t apply slow-effects to every element (eg. box-shadow, z-axis rotation). The myth that the universal-selector is slow is a hangover from ten years ago when it was slow.
Reference: http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx
165
I understand that wildcards have a performance impact, but on smaller sites the impact is negligible. Wildcards are very useful tools for building a site based on progressive enhancement. Obviously, using something like HTML *, really impacts performance on larger sites, but making it more specific, such as #element_id *, helps to quickly make universal changes to child elements.
The wildcard is there for a reason after all. You just have to understand when using it will be more beneficial than not using it. It depends on the context.
I use wildcards and generic selectors when making CSS templates. It's also a great way of quickly tweaking a range of elements inside an unfamiliar WordPress theme using custom styles.
Even Bootstrap, which is popular and streamlined, uses wildcards under the right circumstances.
References:
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
