I’m new to the bricks community but I love it so far. I’m experimenting with bricks’ classes a little bit but I see no way to use them on other elements like a button in a form created in gutenberg for example. Let me give you a concrete example:
Class 1: “.button”
Class 2: “.button–filled”
The first class does the layout for all my buttons and the second class just sets the additional markup like in this case the background color. If I create these classes with bricks and apply them to the bricks button, everything works fine. If I use the same classes for my button in gutenberg nothing happens because the selectors are “dependent” on the “.brxe-button” class. Is there a special reason for it? Anyway if I add manually the “.brxe-button” class to my button in gutenberg it still doesn’t apply. Is there any other script running?
But there’s still the problem, if I use a bricks class on another component that the style of this class isn’t loaded unless there’s another bricks element on the same page with this class.
Yes! Indeed, it won’t work if the global class is not in use on any other element on the same page. In this situation, you will need to add custom CSS, as Bricks global class styling only loads when you apply the global class to the element using the global class field. Otherwise, it won’t work.