Inlining CSS – the Good, the Bad and the Ugly

I’m a sucker for performance gains to the point that I’m convinced I’m actually losing time overthinking it – 🤔

A good example is CSS delivery and it’s always interesting to get others’ opinions on how important they consider styling performance to be and how they measure it.

Inlining – good/bad/ugly?

Good

I see genuine reasons to inline certain styling rules, for use cases such as;

• a one-off element style
• a style that requires browser/JS intervention
• overriding nasty rules

Good use case: inline background-image

<div class="card" style="background-image: url({{ $just_in_time_image_url }})">[...]</div>

Aside: This isn’t the best example, as background images should really be responsive;

<style>
  .card {
    background-image: url({{ $just_in_time_image_url }});
  }
  @media (min-width: {{ $breakpoint_width }}) {
    .card {
      background-image: url({{ $just_in_time_image_url }});
    }
  }
</style>

Beyond these, I’m all for steering away from it.

Bad

IMO, whenever the above doesn’t apply the rule should be contained in a stylesheet. I see the following used inline, which I would absolutely put in a stylesheet;

• repeated inline styling spitting out the same rules – “Always try to be DRY“
• brand-specific rules – argh! 😦

Bad use case: inline brand colours

<div class="card" style="color: #2457ba; background-color: #a0d8c6">[...]</div>

Better still, use a preprocessor, such as SASS, to reduce maintenance overheads.

Ugly

WP plugins. I am amazed at the number of plugins that make excessive use of inlining. My best guesses as to why they do this are;

• inline rules, well…rule – their cascading rank is high (and used in conjunction with they are simply brute force bullies)
• the plugin’s styling will not be in the cascading rules of non-plugin elements
• to annoy me

Ugly use case: inline rule with

<div class="card" style="opacity: 0.5 ">[...]</div>

Closing words

I love building websites and get a lot of satisfaction out of my clients’ sites working hard for them – both in terms of optimising for search engines and for great user experiences.

A note on SEO: I’m not a fan of “SEO Experts”, as they are more-often-than-not focusing on one very specific area of SEO; content. Don’t get me wrong, “Content is king!”, but it’s only part of the puzzle. A good website should;

• load fast, with optimised assets
• look great on mobiles, tablets and desktops, alike
• be easy to use and navigate*

*in hipster terms; provide a good UX design – aka User Experience

When a site is fast, easy to use and has great content (the things actual users are interested in) SEO rankings will naturally improve, as these are the core metric that search engines are concerned with.

Note on low-budget websites: I’m not a fan of the crap out there that’s lowering the standards and the vast number of budget websites that smaller client’s get lumbered with. This is a false economy, as a good website will work hard and, assuming it’s built to perform, it will more than pay for itself.

If you’re looking for a better website, feel free to call for a free consultation with one of the team.

Free Consultation