Resolving Compound Class & Global Class Conflicts

Sometime, you'll encounter a style that is inheriting ( brown ) its value from an unidentifiable source.

You've checked the obvious sources;

• The parent classes
• The default state
• Higher breakpoints

And yet... nothing.

So where's it coming from?

HTML Embeds

This can be caused by HTML Embeds that contain _<style> elements. The designer will process and display those styles, and even display them in the style fields as an inherited value.

However, of course, since they were not set there, you will not be able to locate a specific element which has that value directly applied.

• Check carefully for HTML Embeds.
• Check your Components as well, particularly nav and footer, where they are often added by template designers.
• If you're familiar with Chrome Dev Tools, it's a good way to search for those hidden _<style> elements in your page.

But sometimes, that's not the problem either.

Conflicting Sub-Classes and Global Classes

In certain situations it's possible to create both a sub-class and a global class with the same name.

In Webflow's Designer, this won't be presented in an obvious way in the style configurator- however you'll see the impacts on the canvas, and in the inherited values.

This video demonstrates how to find and fix those situations.

‍

‍