Browser: Chrome
Bricks seems out to output CSS classes based on the order they are used on the page, and not the order that they were declared.
For classes that depend on the order of classes for overrides, in my case breakpoint sizing, this creates unpredictable results. Here’s an example:
Lets say have the following classes declared in the class manager, in this order:
.grid {
display: grid;
align-items: initial;
grid-template-columns: var(--grid-1);
grid-gap: var(--column-gap)
}
.grid-2 {
grid-template-columns: var(--grid-2)
}
.grid-3 {
grid-template-columns: var(--grid-3)
}
@media (max-width: 991px) {
.grid-1-t {
grid-template-columns: var(--grid-1)
}
}
So far so good.
And if I create a grid like this
<div class="grid grid-3 grid-1-t"> .. </div>
It works - grid-1-t properly overrides grid-3 on tablet.
However, THIS breaks:
<div class="grid grid-3 grid-1-t"> .. </div>
<div class="grid grid-2 grid-1-t"> .. </div>
Bricks will output the class for grid-3, then grid-1-t, THEN grid-2. Here it is on my live site:
Desktop
Tablet
And here is the order in which the classes are emitted from the builder:
It does not seem to be dependent on what order they were created it in, or what order they are list in the class editor.
It seems that they are emitted in the order that they are first used on the page, but this doesn’t seem like good or at least expected behavior.
Thanks!