Review and Clean Up HTML Email Template CSS
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
- 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).
- 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.
- Copy the javascript code snippet below.
- In Google Chrome, right click > inspect element anywhere in the eDM Template file that is open in your browser window.
- Press Command+Shift+P (Mac) to open the Command Menu.
- Start typing “Snippet” and select “Create new snippet” from the predictive text drop down menu.
- Paste in the js snippet you copied to clipboard.
- Press Command+Enter to run the command.
- 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
- 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).
- Go to https://purifycss.online/
- Click “HTML and CSS code” tab
- Copy the full email template into HTML code box
- Copy the full stylesheet code in the CSS code box
- Click “Clean up CSS” button
- Copy the results and paste them into Sublime text and format the CSS
- 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 :)
