Review and Clean Up HTML Email Template CSS

Photo by Brett Jordan on Unsplash

Over the years I have worked with many clients to deploy countless email campaigns. Over this period I have seen time and time again amendments made to email templates that seek to fix once off style bugs or cater to seasonal creative designs. Oftentimes, these changes are implemented in haste due to tight turn around times. Overtime, countless rounds of small changes to satisfy single campaign requirements can muddy the template causing unnecessary code bloat and confusion.

Just like you would your house or car, it is important to maintain and care for your template which is why I advocate for an eDM template spring clean every year. It is important to carve out time to complete this activity as it will no doubt help streamline future email builds and reduce time in UAT thereby impacting bottom line. So teams should schedule in time and resources to get this done periodically.

Email Templates

I am a strong advocate for using and maintaining HTML email templates. The main advantage of eDM templates is that they can be reused across campaigns allowing marketers to be efficient and consistent since the underlying code is already written and repurposed from campaign to campaign.

Templates will contain individual building blocks or modules that can be assembled together to form a complete email. Each module in the module library are the core “building materials”. Once they are assembled into an email “structure”, they can be edited/customised to fit the specific requirements of that email design and campaign. For example, changing the text, changing font colour, background colour, changing images, or changing image heights. The updates are made in isolation — within the specific email that is being worked on. Changes here do not change the modules in the module library.

The goal of the template library is so we can use the same specs over and over again which decreases customisation and increases speed to market and also ease of use.

More from Litmus on email template:

With new modules being added to the template over time requiring unique CSS we can sometimes encounter two scenarios which can require cleanup:

  • Identify classes used in HTML but not in CSS stylesheet
  • Identify CSS in stylesheet that is not used in the HTML

Identify classes used in HTML but are not in CSS stylesheet

  1. First things first, you need to compile an HTML file with all of your code and template library modules. In SFMC, this can be as simple as creating a new template based email and dragging in each and every module. After this is done, extract the raw HTML by copying from the code view and pasting into an HTML file (eg:sublime text / vs code).
  2. Next, open the eDM Template file created in step 1 above (template + all modules — this needs to be the full HTML of all your email body modules sitting in the template) with the Google Chrome browser.
  3. Copy the javascript code snippet below.
  4. In Google Chrome, right click > inspect element anywhere in the eDM Template file that is open in your browser window.
  5. Press Command+Shift+P (Mac) to open the Command Menu.
  6. Start typing “Snippet” and select “Create new snippet” from the predictive text drop down menu.
  7. Paste in the js snippet you copied to clipboard.
  8. Press Command+Enter to run the command.
  9. The sample output will look like the below:

The results array will contain the list of undefined CSS classes which are mentioned in the HTML (ie, your template library modules in the email body) but are not defined in the CSS.

This may happen as a result of template re-builds or migrations. Therefore you should check modules for these classes, and either delete them if there are zero rendering issues caused, or re-write the CSS to be added into the eDM Template <head>.

Identify CSS in stylesheet that is not used in the HTML

  1. First things first, you need to compile an HTML file with all of your code and template library modules. In SFMC, this can be as simple as creating a new template based email and dragging in each and every module. After this is done, extract the raw HTML by copying from the code view and pasting into an HTML file (eg:sublime text / vs code).
  2. Go to https://purifycss.online/
  3. Click “HTML and CSS code” tab
  4. Copy the full email template into HTML code box
  5. Copy the full stylesheet code in the CSS code box
  6. Click “Clean up CSS” button
  7. Copy the results and paste them into Sublime text and format the CSS
  8. Use https://www.diffchecker.com/ to review what code was removed by the tool

What other housekeeping efforts do you do? Let me know in the comments :)

--

--

--

I am a certified Salesforce Marketing Cloud Consultant at Bower House Digital in Melbourne, Australia.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Explore AnimatedDefaultTextStyle In Flutter

RFID with Node MCU

The Story Behind Mapping in Solidity

Jenkins Tutorial — Part 3 — Parameterized Pipeline

Shields of Test: Keepers of the Code

Let’s compare Laravel and Doctrine migrations

How to clone a Github repo

Security Patterns for Heterogeneous WSO2 API Management Clusters — Part 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Charlie Fay

Charlie Fay

I am a certified Salesforce Marketing Cloud Consultant at Bower House Digital in Melbourne, Australia.

More from Medium

Top 6 most impactful features of Salesforce Spring ’22 release for Sales Cloud Lightning

Pinpoint Map Location in Salesforce Flow (with Leaflet JS)

Fault tolerance for Journey Builder custom activities

Displaying Account data from another Salesforce org in a Flex card .