There are certain CSS best practices that should be followed in order to increase CSS performance in the browser. These will help the browser to perform less DOM parsing and reduce the time of repaint events.
1. Browser reflow and repaint
If you are unfamiliar with the concepts of reflow and repaint, here are some articles that will get you up to speed:
2. Remove unused styles
Simply having styles that aren't used causes the browser to search the DOM for matches needlessly. This is wasted processor time. Additionally, the CSS file will have a higher page weight that is needlessly sent over the wire to the client.
It may not seem to make a huge difference but removing dead CSS code will greatly increase performance and additionally improve the project stability and maintainability.
3. Avoid "expensive" selectors
The best example of an expensive CSS selector is the wildcard
*. This will select all nodes after the initial selector. Example:
Will select all nodes inside the node with a class
.foobar. This is highly expensive and can account for almost all of the time taken to perform a repaint.
Additionally multiple or advanced selectors will have a similar effect:
- Chained Selection:
- Pseudo Selection:
- State selection:
- Before / After:
These CSS selectors are useful in places but try to use them sparingly and if possible, try to never use the wildcard
*. If an advanced selector must be used, try not to make them universal, e.g.:
input[type="text"] is better than just
In the same manner, use of any global selector will require the browser to walk the DOM, so the more specific a selector the less matches will be found. e.g.:
.foo .bar a span
Note: The browser parses CSS rules right-to-left so a caveat to the previous rule can be when using the following selector:
.ie8 .foo .bar a
The browser will first find all "a" tags inside the ".bar" element, inside the ".foo" element but then it will find that your page doesn't have a ".ie8" class in most browsers and will stop there, all of the previous parsing was done for no reason. (source: Why do browsers match CSS selectors from right to left?)
A possible solution is to put IE specific styles in an "ie.css" stylesheet and include it via a IE conditional comment.
4. Advanced CSS / CSS3
Advanced CSS rules such as "box-shadow" and "border-radius" that replace old image based solutions give a performance decrease due to the browser having to calculate the style.
A border radius is a heavy operation for the browser to calculate, more so than a shadow, colour or opacity. The worst CSS rule to apply for performance sake is the "rotate" rule.
5. CSS Profiling
All of the modern browser have good development tools and especially Webkit, Chrome and Opera have tools designed to highlight where reflow and repaint are performed and how long they take to complete.
Also a CSS profiler is available showing what CSS selectors are matching how many elements and what percentage of the entire paint time this is taking.
This can be found under the "profiles" tab on Google Chrome development tools.