CSS Cleanup

Remove unused CSS and optimize your CSS selectors

When coding, it's best to write in a legible manner. Descriptive class names, comments, and maybe even extra classes you might want to use. When it comes time to send your email, all those best practices can add unnecessary weight to your email, which will hurt maintainability, cleanliness, and potentially push your email over Gmail's size limit.

The CSS Cleanup transformer helps remove and optimize your CSS, without needing to change how you code.

Remove unused CSS

Whether it's for a snippet that isn't referenced in this particular email or something left over from an old template, you'll likely have some CSS that isn't used. The CSS Cleanup transformer finds embedded CSS classes or ids that aren't used by the HTML and removes them.

Note: this only affects selectors that contain 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>
Silent video of the full Parcel window. The email above is displayed in the editor and the Preview. The user navigates to and opens the Source window in the bottom right, which reveals the same HTML code as seen in the editor. At the top of the editor are five tabs, labeled: "HTML", "Text", "AMP", "Message Details", and "Transformers". The user clicks on the Transformers tab, which replaces the code editor with the Transformers pane. The Transformers pane has four sections: "Framework", "CSS Inlining", "Formatting", "URL Parameters", and "CSS Cleanup". The user clicks on the "CSS Cleanup" section, revealing a single toggle switch. The switch is off and labeled "Remove unused CSS; Finds embedded CSS that isn't used by the HTML and removes it." The user turns the switch on, and many additional switches appear with further potential customizations. The HTML code in the Source window is updated and no longer includes the unused CSS class.
Screen recording that demonstrates the Remove Unused CSS cleanup

Shorten CSS selectors

One of the clean up options rewrites your id and class values to be as short as possible. Continuing with the previous code block, the class i-am-used is pretty long - 9 characters. With this option enabled it will be shortened, in this case, to a single character (w). This helps keep your code as small as possible.

<html>
  <head>
    <style>
      .w {
        background: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="w">Hello world</h1>
  </body>
</html>
Silent video of the full Parcel window. The email above is displayed in the editor and the Preview. The user navigates to and opens the Source window in the bottom right, which reveals the same HTML code as seen in the editor. At the top of the editor are five tabs, labeled: "HTML", "Text", "AMP", "Message Details", and "Transformers". The user clicks on the Transformers tab, which replaces the code editor with the Transformers pane. The Transformers pane has four sections: "Framework", "CSS Inlining", "Formatting", "URL Parameters", and "CSS Cleanup". The user clicks on the "CSS Cleanup" section, revealing a single toggle switch. The switch is off and labeled "Remove unused CSS; Finds embedded CSS that isn't used by the HTML and removes it." The user turns the switch on, and many additional switches appear with further potential customizations. The HTML code in the Source window is updated and no longer includes the unused CSS class. The user turns on a second toggle, labeled "Shorten CSS selectors - Rewrites your id and class values to be as short as possible". With this enabled, the remaining CSS selector in the Source window is replaced with ".w".
Screen recording that demonstrates the Shorten CSS selectors cleanup

Allowlisted classes and ids

Sometimes you'll have classes and ids that should never be removed or renamed. A good example of this this fix for links in Outlook.

span.MsoHyperlink {
  color: inherit !important;
  mso-style-priority: 99 !important;
}

The name should never change since Outlook is the one who sets it, and it shouldn't be removed, because even though it doesn't appear in our code, Outlook will add it.

To ignore this class, add it to the Allowlist values list.

Up close image of the Transformers pane, with the CSS Cleanup section open. The "Remove unused CSS" toggle has been switched, revealing additional options. One of these options is "Allowlist values - List of class or id values that should never be removed. Use patterns to match similar values". Below is an editable text field, and a button labeled "Add Pattern".
Screenshot showing how to add a class to the allowlist

By default, Parcel will not remove or rename any classes mentioned in these reset files: Modern Email Resets and Old Email Resets.

Ignore template language patterns

If your code has template code within class names or ids, any words will be treated as part of the class, which might lead to them being incorrectly modified.

To tell Parcel to ignore attributes values that are part of your template language add it to the Ignore template language patterns list.

Up close image of the Transformers pane, with the CSS Cleanup section open. The "Remove unused CSS" toggle has been switched, revealing additional options. One of these options is "Ignore template language patterns", with the description "This ignores attributes values that are a part of your template language i.e. class={{ espInjectedClass }}". Below are several rows of editable text fields. Each row has two text fields. The first row has {{ and }}. The second row has {% and %}. The third row has *| and |*. Beneath is a button labeled "Add Template Language".
Screenshot showing how to add a class name to the Ignore Template language pattern
Previous ArticleNext Article