Change load order, so framework CSS loads before custom CSS added#68

Speaking about Bricks in particular, but maybe useful for other builders depending how the CSS loads.

Ideally we’d want the core framework CSS to load AFTER Bricks default CSS, but BEFORE any CSS that is being added by us inside the builder.

So the ideal order would be this…

• Bricks defaults / theme settings
• core framework CSS
• page CSS generated by builder.

Currently the core framework loads last. This can cause issues where we may need to override stuff inside the builder, but the framework CSS is ‘having the last say’ and so then we need to add extra specifiity, which would not be needed otherwise.

Real world example common use cases..

Say you want to manage the default page widths inside core framework. Bricks adds a default width to containers of 1100px (class brxe-container), which can be changed inside the theme settings.

There’s currently no way to override this number inside of core, without creating a problem. The expectation would be to be able to do this..

.brxe-container { width: 1400px; }

But because this CSS is going to load after all other CSS on the page, we now can’t add classes to individual containers inside the builder that will override this new rule. We’d be stuck with that value for every container.

The same issue happens trying to add default section padding, luckily there’s a way around that one by using :where(.brxe-section), because Bricks doesn’t add a default value here, so we can add something with low specifiity to allow it to be overridden by classes in the builder, but this wouldn’t be needed if the CSS order was changed.

Ideal order..

.brxe-container { width: 1100px; } (bricks default from theme settings)
.brxe-container { width: 1400px; } (we setup new defaults using core framework)
.custom-container { width: 900px; } (user can add classes inside builder to easily override the framework when needed)

Obviously switching the CSS loading order could cause backward compatibility issues, my request is for an option in the bricks addon to switch the order to come before the page CSS (see screenshot).

edit - after further thought, i’ve realised there are situations where you’d need the core CSS to load last, for example users creating ‘components’ to override plugin CSS (styling checkboxes inside forms etc). So maybe an option to ‘split’ the framework CSS, could work. So the selectors/groups can load earlier for the reasons given above, but the components (or maybe even user chosen components) could load later.

This is so important. I can’t edit my heading, etc in bricks any more.

This can help prevent FOUC/T also… Flash Of Unstyled Content/Text, which often creates additional cumulative layout shifts.

We tested various options, but unfortunately we cannot put our stylesheet in between Bricks styles. It can be either before or after them. If it’s placed before Bricks styles, it creates all kinds of issues where our styles are overriden by default Bricks values. We will keep this in mind but at this moment we are not certain about any solution.