Custom CSS - best practices in Bricks

I’ve searched similar topics - and I guess WPcodebox gets recommended as the way forward.
But, I’m trying to understand the logic of Bricks itself.

Here’s my example.

I have a button.
This button has some default styles like paddings, typography settings, borders etc.
Next, I have a sliding background on hover. Since Bricks has no hover effects, I added this via CSS.

I thought Bricks worked with elements in the theme styles. So now my initial design is done, I went to the theme styles to set up a primary and secondary button. Only to find out I can’t add CSS there?
Ok… So… that’s not going to work then?

So I created another button, added a global class in the builder (btn-dark) and styled this button as I wanted it to. I then added the CSS for the hover style in the custom CSS box. Did the same for btn-light. If I now add a button, add the class ‘btn-dark’ it works as needed.

Here comes the question.
Somehow I have the feeling this is not correct.
Where is the CSS to edit it? Do I need to edit it in the css tab in the builder? No centralized file for it?

Coming from elementor I used to add it to a child theme or even in the customizer if it wasn’t much.
But I don’t really get how this system works in Bricks.

Or is what I’m doing the correct way?

Bricks is built with the idea that there are many ways to solving a problem, so there are many choices for applying CSS. There is no single “right” way. Use what makes sense to you. As you did with Elementor, you can add styles to an external file (in this case the bricks child theme style.css file). References: Custom Code – Bricks Academy
Child Theme – Bricks Academy

2 Likes