Bricks load its CSS as a normalize/reset kind of like.
For example:
The Bricks’ normalize
/* frontend-light.min.css */
[class*=brxe-] {
max-width: 100%;
}
/* and all inside of this file */
Also, it chained the .brxe-* class to the user-defined class on the element.
For example:
.header-bold.brxe-heading {
font-weight: 900;
}
This creates a higher level of specificity that is difficult to override with later-defined CSS.
With the latest CSS’ native feature @layer, we will have full control over which styles take priority in a project without relying on specificity hacks or !important.
Browser support:
- caniuse.com 92.46%
- MDN Baseline 2022
This means this native feature is widely available on modern browsers.
Ref:
