How CSS relates to web performance is a funny dance. Some aspects are entirely negligible the vast majority of time. Some aspects are incredibly impactful and crucial to consider.
For example, whenever I see research into the performance of some form of CSS syntax, the results always seem to be meh, it’s fine. It can matter, but typically only with fairly extreme DOM weight situations, and spending time optimizing selectors is almost certainly wasted time. I do like that the browser powers that be think and care about this though, like Bramus here measuring the performance of @property for CSS Custom Property performance. In the end, it doesn’t matter much, which is an answer I hope they knew before it shipped everywhere (they almost certainly did). Issues with CSS syntax tend to be about confusion or error-prone situations, not speed.
But even though the syntax of CSS isn’t particularly worrisome for performance, the weight of it generally does matter. It’s important to remember that CSS that is a regular <link> in the <head> is render blocking, so until it’s downloaded and parsed, the website will not be displayed. Ship, say, 1.5MB of CSS, and the site’s performance will absolutely suffer for absolutely everyone. JavaScript is a worse offender on the web when it comes to size and resources, generally, but at least it’s loading is generally deferred.
The idea of “Critical CSS” became hot for a minute, meaning ship as little render blocking CSS as you can, and defer the rest, but that idea has it’s own big tradeoffs. Related to that, it absolutely should be easier to make CSS async, so let’s all vote for that. And while I’m linking to Harry, his The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache is a good one for your brain.
The times when CSS performance tends to rear it’s head are in extreme DOM weight situations. Like a web page that renders all of Moby Dick, or every single Unicode character, or 10,000 product images, or a million screenshots, or whatever. That way a box-shadow just has a crazy amount of work to do. But even then, while CSS can be the cause of pain, it can be the solution as well. The content-visibility property in CSS can inform the browser to chill out on rendering more than it needs to up front. It’s not the more intuitive feature to use, but it’s nice we have these tools when we need them.
