Specifcity Issues in Bricks Builder

How To
1

Hey guys, I have set some default global styles under Theme Styles in Bricks Builder. However, for some exceptional elements, I would like to apply unique styles that differ from the theme styles.

To do this, I created custom styles for an element and applied them to multiple elements using a shared custom class. Unfortunately, the styles from the custom classes are being overridden by the global theme styles. Please look at the following screenshot:

bricks forum

Has anyone else encountered this issue? How can I ensure that my custom styles take priority over the theme styles for these specific elements?

Thanks in advance for your help!

2

Not sure what you mean here. You custom class does not have any custom properties that are overriding the default class properties. From what I see, you have a custom property of padding-top with a value of 10px, but the default class does not have any padding properties.

3

As you can see that background-color property is getting overridden. If i try to set different background color for my custom class. It won’t appear.

There are two custom classes which are “.cta-btn-primary” and “.specifity1”. I am talking about the properties of “.cta-btn-primary”

4

Have you tried putting a space in between the two classes? .cta-btn-primary .brxe-button

Also, do you have an url, as it is easier to troubleshoot then a screenshot.

Cheers

5

Sure, please check the following URL:

http://51.210.113.215/~excoach

Steps to reproduce the issue:

  1. Click on settings icon on top left corner of the builder then choose theme styles.
  2. Under theme styles, expand “ELEMENT - BUTTON” accordion and apply some stylings such as background color and typography.
  3. Now add a button element on the page. The button element will have the theme style applied.
  4. Apply different styling to this button at “CLASS” level so I can share the styling to some elements on other pages as well. Check the following screenshot for implementation done by me:

image

6

Thanks for that 


So I had a look and from what I can see all is working just fine. I wonder if it is a cache issue? Also, how are you rendering your stylesheets in the builder (inline or external)?

Here is a video showing you what I see: Watch 2025-03-01 13-27-50 | Streamable

Cheers

7

Hello @shingen

Thanks for making the efforts. However, I was unaware that you would only inspect my site instead of trying to reproduce the issue in your personal setup using the steps I mentioned previously.

I removed the theme style already by the time you looked at my website. I will revert the site to the previous version. Please have a look once again to both the buttons normal and hover state


Also, I am rendering the stylesheets as external.

8

Ok, so two things. 1. Look at how you have your button marked up and 2. Look in your uploads folder, as there is a css file in there overriding your styles.

Here is a video: Watch bricks-buttons | Streamable

Cheers

9

Hey @shingen

The CSS file which you are finding inside the uploads folder through inspect element is generated by the builder itself. Try to follow the steps below in order to reproduce the issue at your end.

  1. Click on the settings icon on top left corner of the builder.

    image
    image297×528 16.2 KB

  2. Click on theme styles then find “Element - Button” accordion and expand it.
    Upload and share screenshots and images - print screen online | Snipboard.io

  3. Add some styling (such as background color) under “Element - Button” accordion and some different styling at class level for “cta-button-primary”.

After following these steps, you should also have the same css file overriding your class level css

10

So that is your issue then. You are setting global styles to the button and then trying to overwrite them with a class. Maybe don’t set the global styles on the button element 
 instead, focus on custom classes. It just seems to me you are making more work for yourself.

11

Three things I would like to confirm with the issue I encountered:

  1. I was planning to set global styles for default elements such as CTA button and different styling for exceptional elements, let’s say if I want to have a ‘delete’ or maybe ‘warning’ button on multiple places of the website.

  2. As per your suggestion, I can also avoid setting the global classes and focus on custom classes instead. I think this should hold true for every scenario in that case. Then what is the significance left for global classes? If someone wants to have global styling, they can make custom classes as well which will behave as default global styles.

  3. As you can see that the specificity of global classes is greater than our custom classes. If I want to increase the specificity, is there any option or workaround available in the builder? I realise that I can do this by writing custom css in ‘Advance CSS’ option but it wouldn’t be a good practice that we are giving some styling by builder options and some styling by writing CSS for scalable projects.

Although, I may sound like doing nitpicking but I am asking these issues with the perspective of following good practices on scalable projects.

12

If you are talking scaleable projects, then using the global builder styler is not the best approach in my view. You cannot apply a class to any of them, so it is like applying styles to the ID level. You cannot copy and paste those styles either. Once you add them in the global element area, you constantly have to go back there and make the changes. To me, this is not a good workflow.

Instead, use the great CSS class and variable manager. Create custom classes for things like buttons, alerts, etc. Also, take into consideration the new component functionality now. That global element are doesn’t work well with it and it again takes you out of your workflow.

Each to their own, but I never use that global section except for the main font size, font family, and container width. The rest I build based on the element itself. I also style all my css in the css window under styles. 1. It is a faster way to code than using this builder value fields and 2. You see what you have and don’t have to bounce around. Combine that with custom styles and zoom 
 off to the races.

A good way to look at it is the same way the “Atomic Design System” works. If you build your styles around that, you will be golden.

I have attached an example. Here you can see that I have all my code in the css area. I can either use the default native Bricks color variables or create my own as you can see with the text color. This to me is much easier and faster, as it is one place, not all over. If I make a mistake, it is easy to find.

Index-Builder--03-01-2025_05_00_PM
Index-Builder--03-01-2025_05_00_PM1440×794 68.3 KB

13

Alright, this sounds great. Thanks for cooperating with me and holding this discussion to help me out. There is one final question
 do you think that there should be some workaround or option to increase the specificity of our custom classes in the builder?

14

No problem, you’re welcome. Also, I agree 
 if you think there is room for improvement with a feature, send the Bricks folks a message – they are always good a responding and lending a hand as well. help [at] bricksbuilder [dot] io

15

Alright great! I will be dropping the mail to them.