Inline CSS in Jekyll
I have long been a fan of Jekyll. It has some flaws and is not always the best tool for the job, however, it can be a great tool for some situations. I have lost count of how many websites I have built with it.
Recently, I made yet another site with Jekyll, this time for Simplified JavaScript Jargon and I found myself facing a not so atypical issue — inlining styles in the <head>.
The Need
You may have heard of critical CSS. The idea behind the concept is to provide critical styles (the ones responsible for the look of the top and main content areas of the page) as soon as possible to the browser so that there is no delay before accessing the content.
There is a common rule that says it is good to send what is needed to render the top of the page in under 14kb, because that is roughly how much the server can handle in one roundtrip. Google PageSpeed Insights gives more information about this in their documentation, so feel free to have a look if you want to know why it works this way.
To that extent, if your CSS is small enough (like it is for SJSJ), you could inline it all in the <head> and send it all together in the first roundtrip without even bothering with an external stylesheet. That is not super common, but when it is, it’s pretty rad.
Back to Jekyll
So my idea was to include styles inside a <style> tag in the head of the document, and skip an external stylesheet altogether. My first bet was to build the site, then move the generated CSS file inside the _includes folder so that it can be included with the {% include %} block. It worked, but was a bit tedious as a process.
Then I realised that if I was able to inline all my styles in the head of the page, it was because I did not have so many of them, so I could definitely tackle the problem the other way around.
Instead of moving my styles inside the _includes folder after the build, I could create them directly inside that folder. I could then have a CSS file imported inside the head of the document from there.
/* _includes/styles.css */
.foo-bar {
color: pink;
}
And then:
<!-- _includes/head.html -->
<style>
{% include styles.css %}
</style>
Tada! It gives us just what we want:
<!-- … -->
<style>
.foo-bar {
color: pink;
}
</style>
<!-- … -->
What about Sass?
Okay, you might be thinking “yes but it means we can’t use Sass anymore.” Yes and no. Basically, we have taken the whole Sass pipeline from Jekyll out completely, but there still is a way.
If you ever read the documentation from Jekyll, you might have noticed that there is a scssify and a sassify filter. The documentation says this allows us to:
Convert a Sass- or SCSS-formatted string into CSS.
Nice. It means we can still use Sass by piping our whole file into this thing. The only problem is that we cannot apply filters on a block, like {% include %}. The trick is to capture the content of the file in a variable (thanks to {% capture %}), and then apply our filter to this variable when outputting it.
<!-- _includes/head.html -->
{% capture styles %}
{% include styles.css %}
{% endcapture %}
<style>
{{ styles | scssify }}
</style>
Tada (again)!
What About Minification?
The nice thing with this scssify filter is that it respects your Sass configuration from _config.yml. So if you set the output style to compressed in your configuration file, the filter will compile Sass to compressed CSS.
# _config.yml
sass:
style: compressed
Tada (one more time)!
<!-- … -->
<style>
.foo-bar{color:pink}
</style>
<!-- … -->
Final Thoughts
As you can see, there was nothing groundbreaking in this article. However, I must say it never really occurred to me that I could just write my styles in the _includes folder directly before I’d spent time thinking about this issue the other day.
Of course, this whole idea would fall short when dealing with a stylesheet that is way bigger than 14kb, where you would need to extract the critical CSS with some tool. But for small pages and sites — it comes in very handy!
If you want to see how it works on a real project, you can check the files on the SJSJ repository:
Hope it helps, and happy coding!