CSS cleanup
Design Studio New UpdatedIn the code editor, use the CSS cleanup transformer to remove unused CSS and optimize your CSS selectors.
This article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
Remove unused CSS
Enable this transformer and we’ll automatically find embedded CSS classes or ids that aren’t in use and remove them.
This only affects selectors with at least one class or id. If the selector only has attributes and tags (i.e. a[x-apple-data-detectors]), it will not be affected.
In this code, the class i-never-get-used will be removed since no HTML tags use that particular class.
<html>
<head>
<style>
.i-am-used {
background: blue;
}
.i-never-get-used {
background: red;
}
</style>
</head>
<body>
<h1 class="i-am-used">Hello world</h1>
</body>
</html>
Shorten CSS selectors
After you enable Remove unused CSS, you can enable Shorten CSS selectors. This shortens your id and class values.
Continuing with the previous code example, the class i-am-used is pretty long — 9 characters. This transformer would shorten it to a single character to keep your code as small as possible.
After transformer:
<html>
<head>
<style>
.w {
background: blue;
}
</style>
</head>
<body>
<h1 class="w">Hello world</h1>
</body>
</html>
Allowlist values
Set an allowlist to prevent us from cleaning up specific classes and ids. For instance, you’ll want to do this for links in Outlook:
span.MsoHyperlink {
color: inherit !important;
mso-style-priority: 99 !important;
}
The name shouldn’t be shortened since Outlook sets it, and the class shouldn’t be removed, because even though it doesn’t appear in our code, Outlook will add it to your HTML.
By default, Design Studio will not remove or rename any classes mentioned in these reset files: Modern Email Resets and Old Email Resets.
Ignore templating language patterns
If your code uses a templating language like liquid or handlebars within class names or ids, the CSS Cleanup transformer may incorrectly modify them because it treats all words as part of the class.
By default, when CSS Cleanup is on, we ignore values within {{ }} and {% %}. You can add/remove syntax so we don’t clean up those values.
