Element Custom CSS is misleading

[Tratz]

Heyo,

I’m just chalk full of suggestions for you guys. The customize element css feature found in nearly all the elements is not scoped.

Let this also be a warning to other users

If you do not encapsulate your styles in “element specific” css within its own css class of some sort, your css customization bleed out into the global css scope, thereby polluting your page styles.

This is, of course, an unexpected side effect. Otherwise, what’s the point in having element-specific css customizations??

[Alaa]

Hi @Tratz

I’ve read your message but I don’t think this is true, are you sure you are using the element handler like this when typing your CSS code in the element CSS area?

$el {
    color: #ff0044;
}

This will guarantee the CSS code is specific to this CSS element only.

If you have more details regarding how to reproduce this issue, please share.

Thanks.

[Tratz]

When you say $el do you literally mean something like:

$h1 {
  font-size: 1em;
}

Or do you mean

h1 {
  font-size: 1em;
}

I didn’t try the former, just the latter. After saving it in my container/element specific custom css, I saved, opened the site in another tab, did a hard refresh (ctrl+shift+r) to reload the styles. When I look in the inspector, the scope for that element is clearly global.

[jade]

Hi there,

Hope you’re well today.

Before you place anything in the Element CSS you will see the placeholder:

Each V2 element will have a generated CSS class and the special $el is important to use in an element’s element CSS as that will target the element through its generated class.

Please check our knowledge base article for the Element CSS for more information:

Element CSS | Themeco Docs

Hope this explains it.

[Tratz]

100%

Thank you kindly!

[jade]

You’re most welcome! Have a nice weekend.