When it comes to CSS performance, I would like you to remember this one thing:
"Architecture is outside the braces, performance is inside." | ||
| --Ben Frain | ||
Let me expand on my little maxim:
As far as I am able to prove, worrying about whether a CSS selector (the part outside the curly braces), is fast or slow is pointless. I set out to prove this at http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/.
However, one thing that really can grind a page to a halt, CSS wise, is 'expensive' properties (the parts inside the curly braces). When we use the term 'expensive', in relation to certain styles, it simply means it costs the browser a lot of overhead. It's something that the browser finds overly taxing to do.
It's possible to take a common sense guess about what will likely cause the browser extra work. It's basically anything it would have to compute before it can paint things to the screen. For example, compare a standard div with a flat...