A warning on CSS performance

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 can 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 here: https://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 the browser, or perhaps more accurately, the host hardware, finds overly taxing to do.

It’s possible to make a common-sense guess about what will cause the browser extra work. It’...