How to avoid bricks ID output in markup using class field, not global classes

How To
1

Hey folks! I searched but could not find anything on this forum regarding the following:

I am aware that the preferred workflow for Bricks is using global classes. However, I don’t want to use global classes for everything across the site. I still want to use classes, and I control my styles from an external stylesheet - and use the style tab > css tab > css field to add my css to an element for styling.

the issue with this is that whilst I am styling at the class level, the element ID still outputs in the html/markup , creating a lot of noise in my overall DOM.

Is there a way I am not understanding to get around this?

I have already checked the option under settings for “Add element ID as needed”.

thanks !!

3

Hey @robertobze,

This is expected with that workflow.

The “Add element ID as needed” setting only skips Bricks element attributes when the element has no CSS settings that need them. If you add CSS in the element’s Style > CSS > Custom CSS field (and use %root% selector and on ID level), Bricks treats that as element-scoped CSS and keeps the element ID available as the root selector.

1 Like
4

understood, thanks !!

I hope I understand crystal clear that it only happens if I use %root% at the ID label.

1 Like