Summary
Some takeaways from these tests:
- Sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it's really not worth spending much time over. Furthermore, there is disparity across browsers of what the slowest selectors are anyway. Look here last to speed up your CSS.
- Excessive unused styles are likely to cost more, performance wise, than any selectors you chose so look to tidy up there second. 3000 lines that are unused or surplus on a page are not even that uncommon. While it's common to bunch all the styles up into a great big single
styles.css
, if different areas of your site/web application can have different (additional) style sheets added (dependency graph style), that may be the better option. - If your CSS has been added to by a number of different authors over time, look to tools like UnCSS (https://github.com/giakki/uncss) to automate the removal of styles; doing that process by hand is no fun!
- The battle for high performing...