Inline CSS in Jekyll

Key Takeaways

• Inline CSS in Jekyll can be a valuable tool for sites with small enough CSS, as it allows you to send all styles in the first server roundtrip, eliminating the need for an external stylesheet. This is particularly effective for delivering critical styles that shape the look of the top and main content areas of the page.
• In Jekyll, styles can be included directly in the _includes folder, then imported inside the head of the document. If using Sass, the scssify filter can be used to convert a Sass-formatted string into CSS, maintaining the ability to use Sass even when inlining styles.
• The scssify filter in Jekyll also 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, aiding in minification.

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

.

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

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

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.

<span>/* _includes/styles.css */
</span>
<span><span>.foo-bar</span> {
</span>  <span>color: pink;
</span><span>}
</span>

And then:

<span><!-- _includes/head.html -->
</span>
<span><span><span><style>></style></span><span>
</span></span><span><span><span>{% include styles.css %}
</span></span></span><span><span></span><span><span></span>></span>
</span></span>

Tada! It gives us just what we want:

<span><!-- … -->
</span><span><span><span><style>></style></span><span>
</span></span><span><span><span><span>.foo-bar</span> {
</span></span></span><span><span>  <span>color: pink;
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></span>></span>
</span><span><!-- … -->
</span></span>

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.

<span><!-- _includes/head.html -->
</span>{% capture styles %}
{% include styles.css %}
{% endcapture %}

<span><span><span><style>></style></span><span>
</span></span><span><span><span>{{ styles | scssify }}
</span></span></span><span><span></span><span><span></span>></span>
</span></span>

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.

<span># _config.yml
</span>
<span>sass:
</span>  <span>style: compressed
</span>

Tada (one more time)!

<span><!-- … -->
</span><span><span><span><style>></style></span><span>
</span></span><span><span><span><span>.foo-bar</span>{color:pink}
</span></span></span><span><span></span><span><span></span>></span>
</span><span><!-- … -->
</span></span>

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:

• _includes/styles.css
• _includes/head.html

Hope it helps, and happy coding!

Frequently Asked Questions about Inline CSS in Jekyll

What is the difference between inline CSS and external CSS?

Inline CSS is a method where CSS is applied directly within your HTML tags using the ‘style’ attribute. This method is useful for applying unique styles to specific elements on a page. On the other hand, external CSS involves linking to an external .css file from your HTML document. This method is beneficial when you want to apply the same styles across multiple pages, as it promotes reusability and reduces redundancy.

How can I use inline CSS in Jekyll?

To use inline CSS in Jekyll, you need to apply the CSS directly within your HTML tags using the ‘style’ attribute. For example, if you want to change the color of a paragraph to red, you would write:

This is a red paragraph.

. Remember, the CSS properties should be written in camelCase when using inline CSS in Jekyll.

Why should I use inline CSS in Jekyll?

Inline CSS in Jekyll is beneficial when you want to apply unique styles to specific elements on a single page. It overrides any conflicting styles in external or internal CSS, giving you more control over your webpage’s appearance. However, it’s best to use inline CSS sparingly, as it can make your HTML document messy and hard to maintain if overused.

Can I use both inline CSS and external CSS in Jekyll?

Yes, you can use both inline CSS and external CSS in Jekyll. However, keep in mind that inline CSS has a higher specificity than external CSS. This means that if there are conflicting styles, the inline CSS will override the external CSS.

How can I override inline CSS in Jekyll?

Overriding inline CSS in Jekyll can be tricky because of its high specificity. However, you can use the ‘!important’ rule in your external or internal CSS to override inline CSS. For example, if you have an inline style that sets a paragraph’s color to red, you can override it in your external CSS like this: p {color: blue !important;}.

What are the limitations of using inline CSS in Jekyll?

While inline CSS in Jekyll provides a high level of control over individual elements, it has its limitations. It can make your HTML document messy and hard to maintain if overused. It also doesn’t promote reusability, as you have to manually apply the styles to each element.

How does inline CSS affect the loading speed of my Jekyll site?

Inline CSS can potentially increase the loading speed of your Jekyll site because the browser doesn’t have to make additional HTTP requests to fetch external CSS files. However, if you have a lot of CSS, it’s better to use external CSS to keep your HTML document clean and easy to maintain.

Can I use CSS classes and IDs with inline CSS in Jekyll?

No, you cannot use CSS classes and IDs with inline CSS in Jekyll. Inline CSS is applied directly to the HTML element using the ‘style’ attribute, and it doesn’t support classes or IDs. If you want to use classes or IDs, you should use external or internal CSS.

How can I use media queries with inline CSS in Jekyll?

Unfortunately, you cannot use media queries with inline CSS in Jekyll. Media queries are used in external or internal CSS to apply different styles for different devices or screen sizes. If you need to use media queries, you should use external or internal CSS.

Can I use pseudo-classes and pseudo-elements with inline CSS in Jekyll?

No, you cannot use pseudo-classes and pseudo-elements with inline CSS in Jekyll. Pseudo-classes and pseudo-elements are used in external or internal CSS to style specific parts of an element or to add special effects. If you want to use pseudo-classes or pseudo-elements, you should use external or internal CSS.

The above is the detailed content of Inline CSS in Jekyll. For more information, please follow other related articles on the PHP Chinese website!