My Approach to Readable CSS in HTML Emails

Making inline CSS manageable in emails with JavaScript

Ferenc Almasi
Feb 6 · 4 min read
Manage CSS in HTML emails
Manage CSS in HTML emails
Photo by Webaroo.com.au on Unsplash

Recently, I started working on a password recovery implementation and I was thinking about what would be — if not even the cleanest — but still a clean solution to style my email template without having to go mad while reading inline CSS.

See, the problem with HTML emails is that you can’t source out your CSS style declarations, you only have a limited option: exactly one, which is to use inline styles. I wanted to send out the emails through an Express server so it was evident to use JavaScript and hence this article was born.

Before we get into coding however, It’s important to mention that we have a bunch of user friendy online tools that have a GUI with which you can create stunning email template.

For my problem, having it all done in JavaScript seemed to be the optimal and simplest solution. I only needed a single template and also wanted to have full control over everything.


Creating templates

Starting off, you of course want to have a template. I’ve created a function which exports the following string:

Here you can see that I’ve used a template literal so I can wrap HTML elements and make them readable. I’ve solved the inline styling problem with a function call. It gets the CSS styles and turn them into inline styling. But what does the function do internally and where do the parameters coming from?


Adding CSS

First I’ve created a container object for storing the CSS styles and created additional objects inside it to define the CSS properties for each element. These are the objects that are passed down into the function call:

Each property inside the object is the name of a CSS property associated with its CSS value. This is what we pass then into the function which sole responsibility is to create the inline CSS styles for it.

So what is the solution? It can actually be done in one single line of code:

We can loop through the object with and on each value where we concatenate the key with the value using colons. After that, we can join them together with a semicolon.

The same piece of code have other use cases such as generating query strings:

Generating query strings in JavaScript
Generating query strings in JavaScript

Adding localization support

While at it, while not source out the text itself? That way, we can add localization support in a relatively easy way. All we have to do is pass an object to our function then reference the keys in the template:

Here I added an parameter to the function that holds an object to a couple of keys. For each language, you can create a new file holding the necessary translations. I’ve created a separate folder for them called :

The localization folder structure
The localization folder structure

And each of them exports an object with the necessary keys:

The way you would use them is to import the template and one of the localization files, depending on your needs. You can import them based on some variable, for example a request param and call the function to generate the template:


And the end result?

HTML email formatted with CSS
HTML email formatted with CSS

I’ve used images in my template, but for them to appear, you want to send out the emails through a trusted SMTP server. Otherwise your images not only won’t appear, but more importantly, your emails will land in the spam folder.

It’s also important to mention that you have some limitations when it comes to CSS. Not all styles are supported by email clients. For example: although you see a nice applied here, this is the exception. Most of the email clients don’t support it, including Gmail. If you however really insist, you’re better off using images. And since you have more email clients than browsers, making a consistent design for them can be a challenge.

This is why I would advise to only include the most necessary and basic things, such as colors or layout. Everything else should only be a compliment and your emails should look polished even without them.

So how do you actually send out the mails with Express? That deserves its own article which I’m planning to write in the near future, so make sure to follow up. 🍊

JavaScript in Plain English

Learn the web's most important programming language.

Ferenc Almasi

Written by

Frontend dev with a passion for beautiful code and simple yet attractive designs. Get in touch by saying hello@allma.si or visit allma.si directly 👋

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade