I've recently been investigating web page performance and focusing on CSS efficiency to see where performance gains can be made. After using the Chrome CSS profiler, I came to the conclusion that my "reset" CSS file was taking a long time to parse and match selectors, slowing down the browser paint process.
Reset CSS files are used to normalise default DOM element styles, so that your custom styles will work effortlessly across all browsers.
Naturally then, the reset CSS must target many elements in order to change their style. However, how can this be done in the most efficient manner?
This useful website, CSSReset.com provides 5 popular reset methods for you to use.
For my experiment I have used each of the provided codes and implemented them in turn into my web page. I then run though a "script" of accessing certain parts of the website while the Chrome CSS profiler is running and measure the results of each. I have performed the script multiple times with each code snippet to ensure a valid result.
In short, my findings are: normalize.css has the best efficiency, by quite a long way, with YUI coming in second place.
The reason normalize.css is highly more efficient is that unlike the other scripts, it does not select all DOM elements in a single comma separated declaration, but breaks up the declarations into smaller segments.
Due to my project not using many DOM elements, the browser can skip parsing for many of these declarations making overall performance better.
This is interesting as normalize.css is the least used code snippet on the website, at the current time of writing.
I'd be interested to follow up on this and here any arguments for or against using a reset CSS in this manner.