Inlined CSS – When To Use vs Stylesheets

With WordPress taking the high road and deciding to favor inlined CSS vs large stylesheets to only load CSS that’s on the page, I feel it’s time to examine our own bloated stylesheets and do what we can to reduce the number of unused CSS rules on our page. While WordPress’s latest changes will take care of some core CSS stylesheets, we continue to have a lot of junk in our theme’s styles, and even our plugins.

For the most part, we can’t do much about plugins – when they update, our changes will be overwritten anyway. But we can jump into our theme’s stylesheet and prune the CSS we’ll never use. In this article however, I’ll talk about custom elements on the page and how we should deal with adding CSS styles.

“One-Off” CSS Elements

I have a number of custom HTML elements on my pages. For example, here’s a table I use a few times on my site to highlight pricing differences:

This table is used on only a handful of pages. It has a simple stylesheet. Basically, just something to change the color of the <thead> HTML tag like this:

<style media="all">
.wp-block-table thead {
    background: coral;
}
</style>

Now where do I put this? After much thought, I’ve decided to use WordPress Gutenberg’s custom HTML block. I’ve written before about how useful it is. I use it for everything. From JSON structured data, to Javascript snippets, and of course, custom CSS.

Isn’t a Stylesheet More Efficient?

Now the obvious suggestion here is to simply add the above CSS code to a custom stylesheet, or even directly to my theme’s “style.css”. After all, it has the benefit of easy maintenance. What if I want to change the color at some point in the future? I’ll have to go to each and every page that contains the table above and manually change the color on each of them!

From a programming point of view, I can’t deny that including the above CSS rule in a central stylesheet is a better choice. But from a performance point of view, it’s the reverse. Lots of CSS rules target only very specific elements that are rarely used. And including them in the central stylesheet means that they will be loaded for every page on the website. Is that what we want? Isn’t our goal to reduce the number of unused CSS rules?

We Can do the Same with Javascript

The same conundrum applies to snippets of Javascript. For example, I’d given a short script earlier for opening links in a new tab. Now we have two choices – either use the custom HTML block to add the script inline, or add it to the global functions.php that executes on every page load.

Clearly the former has the benefit of performance and the latter has the benefit of maintainability. For me, both for JavaScript and CSS, it comes down to two things:

1. How infrequent is the snippet used?
2. How likely is it that I will need to modify it?
3. Is it big?

If I rarely use a certain piece of HTML code or JavaScript snippet, and I’m hardly ever going to want to change it, then it makes sense to inline it within the page itself using the custom HTML block. On the other hand, if it’s something that’s quite large (like say the CSS rules for social media) and is used very frequently with customizable colors etc, it’s much better to place it in a global location.

Fine Tuning with Gutenberg

I’m glad that Gutenberg is giving us the opportunity to explore little optimizations like this. Previously, we didn’t have a choice since the alternative editor was so bad at including non-text content. But now we can choose for ourselves which approach we want!