Dynamic class names are increasing in popularity across the web. Here, we'll talk about what they are, and how Mutiny handles them.

What are dynamic class names?

Element class names are attributes tied to an element that helps you identify it. You can use class names to apply styles, custom javascript, or in Mutiny's case, identify which elements should be personalized based on a certain experiment. Here's an example:

<button class="blue">Click Me!</button>

In this example, the <button> element has a class name of blue. You may then choose to style that class to set the background-color to blue:

<style>
  .blue {
    background-color=blue;
  }
</style>

Dynamic class names use this same concept, but rather than the class name being blue, you'd more likely see something like daVUaS. This is a random string of characters that are generated automatically by CSS-in-JS libraries. Whats more, is that these class names may not stay the same. Depending on what edits you make to your site, the element with class daVUaS may later turn into jdTncd.

How do dynamic classes affect Mutiny?

Mutiny uses class names in a few different ways. Most importantly though, we use it to target elements that you want to personalize. For example, assuming thats the only button on the page with the class name of blue, Mutiny may target that element using that class name. So, if you changed the color of that button to red using Mutiny's editor, when Mutiny loads on your site, it'll say "give me the button with the class name of blue, and change its background-color to red." Even if you're making other changes, like changing the button text, Mutiny may still target that element using the class name of blue.

If your site was using dynamic class names, Mutiny would save the experience knowing that that blue button had a class name of daVUaS. If that class name changed later on to jdTncd, Mutiny wouldn't know the new class name, and thus wouldn't personalize that element, which would result in unexpected things showing on your site.

How does Mutiny solve this problem?

The first problem to solve is knowing which elements have dynamic class names. Sometimes a random string of characters will look like a dynamic class name, but its actually a static string of random characters. In order to identify dynamic class names, Mutiny needs to understand the specific library being used to generate these class names. These libraries have different ways of exposing their dynamic classes, so they have to be supported individually. Right now, we current support these libraries, and we'll continue to update this list as more libraries are supported. If you're using a CSS-in-JS library that isn't on this list, let us know!

• Styled Components
• Emotion
• Styled-JSX
• JSS

We also allow you to add in a specific data attribute to manually indicate that certain stylesheets or elements should be ignored by Mutiny. To do this, add on the attribute data-mutiny-ignore-styles to any element, <style> or <link>.

Examples:

<link rel="stylesheet" href="https://mutinyhq.com/stylesheet.css" data-mutiny-ignore-styles>
<style data-mutiny-ignore-styles> ... </style>

Once we've identified the dynamic class names on the page, we need to do some work to ensure that even if that class name changes, we will continue personalizing it correctly. To do this, we have the option to "inline" your styles. If you click on an element where we've detected dynamic class names, the editor will show a button giving you this option: