Rules within Bricks layered CSS still use !important, and it takes priority over unlayered styles with !important.
Normally, layers declared later have higher precedence for normal declarations (e.g., @layer a, b; means b overrides a). However, for !important declarations, the earliest declared layer has the highest precedence. This still makes it difficult to override !important declarations in Bricks layered rules.
This makes it impossible to customize certain element with custom CSS e.g. Sliders, Nestable Nav etc.
The rules shown in the image above are for the Bricks Nav Nestable, and they are impossible to override because they are inside the bricks layer.
My suggestion is to move all important declarations to a different layer with the highest priority, that way its !important rule will become the lowest priority. This is because !important rules inside layers with the highest priority actually have the least specificity while !important rules inside layers with the lowest priority have the highest specificity.
Ideally !important would not be used in the default styles. But in some cases it’s necessary to override styles we can’t control or for other reasons that depend on the specific case. That said, there are likely instances where it’s not strictly needed anymore. If you come across specific cases, please let us know (through a new forum bug report or help@bricksbuilder.io). We’re open to reviewing and removing them where safe. What we cannot do is remove them globally without breaking layouts that depend on the current behavior.
You’re correct about how the important cascade works in layered CSS: in layered CSS, normal declarations follow the order they are declared in: later layers override earlier ones. Unlayered styles sit above all named layers in the normal cascade, so they override any layered styles that are not marked !important.
But for !important declarations, the cascade reverses. Earlier-declared layers override later ones, and both override unlayered !important styles. So if Bricks defines a !important rule in a cascade layer like @layer bricks, that rule can beat a !important rule in your custom unlayered CSS.
You’re right that this can prevent your unlayered overrides from working. But it’s not impossible to override these rules. The correct method is to wrap your custom CSS in a layer declared before bricks in the cascade, or a sublayer (since it would have lower priority than the parent layer). Bricks includes @layer bricks.reset for exactly this purpose. Since it’s a sublayer and declared earlier than other sublayers, any !important rule you write in bricks.reset will take precedence over a !important rule in bricks.
If you run into a case where even that doesn’t work, or if you think a specific !important is unnecessary, please feel free to report it. And if you have ideas for how we could handle this better, we’re open to that too.
I wasn’t aware of the role of the bricks.reset layer, which is why I initially thought overriding those styles was impossible. It’s great to know the Bricks team included this fallback, very thoughtful! I tested your suggestion, and I’ve successfully overridden the !important declarations I was struggling with.
