• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • WordPress Hosting
    • WooCommerce Hosting
    • Enterprise Hosting
  • VPS
    • VPS Hosting
    • Flex VPS
  • Reseller
  • Email
  • Gaming
  • Domains
  • Website Builder
  • Account
  • Blog Home
  • Categories
  • Authors

Inlined CSS – When To Use vs Stylesheets

Bhagwad Park

Published on: March 24, 2021

Categories: Website Development 0

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:

Example of a "One-Off" Table
Example of a “One-Off” Table

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Related Posts

GoDaddy vs. Shopify: Which Website Builder Should You Choose?

In this article, we'll explain how site builders work and compare GoDaddy vs Shopify, as well as consider WordPress and NameHero instead.

Git Branch Naming Conventions

Here's a guide explaining best practices for Git naming conventions that's easy to understand for beginners.

Switching Branches Using Git Switch

In this post, we will walk through everything you need to know about one of the sub-commands that are part of git, the git switch command.

Understanding SQLite Vs. MySQL

In this easy to understand guide, we will cover the differences of SQLLite vs. MySQL and which to choose for your app.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!


Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2024)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • Flex VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Email Hosting
  • Game Hosting
  • Domains
  • Website Builder
Help & Support
  • NameHero Blog
  • NameHero Gaming Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Gaming Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2025 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA