Where to place Custom CSS? Stylesheets in Bricks? The Order that CSS is Applied in Bricks?

How To
1

Hello, I would like to fully understand what is the proper best practice of using custom CSS in Bricks, for both website speed and development efficiency.

  • Is it possible to create Stylesheets within Bricks similar to Oxygen?

  • If not, Where do you place your custom CSS? I believe placing custom CSS at the element level is a bad practice (It could sometimes take ages to find where some piece of CSS is)

  • Also, What is the order that CSS Is loaded in Bricks? I’m asking similarly to this post, in order to avoid getting CLS / FOUC where certain elements CSS only loads later down the loading road.

1 Like
2

Auto-answering myself in case this might help someone in the future here.

Kevin Geary (author of Automatic CSS) recommends using WPCodeBox.
Since I’m already a user of WPCodeBox this makes a lot of sense considering all the flexibility of the plugin, being able to control when things load as well as the possibility of having a very organized view an control of different stylesheets and other code snippets.

This is taken from facebook :

I believe the order of stylesheets is:

  1. bricks-frontend

  2. bricks-color-palletes

  3. bricks-global-custom-css

  4. bricks-theme-style

  5. header

  6. template (single, archive, etc.)

  7. footer

  8. content (post, page, template, etc.)

Adding CSS to a post/page or each element goes directly to a single stylesheet for each post/page as well as the styles applied to the elements inside them.

I might have omitted some additional styles related to icons or messed the order a bit. But it’s fair to say that the last stylesheet is the one from the current post/page.

2 Likes
3

What about any css added to the additional CSS in the wordpress customizer? Where would that stylesheet land in the hierarchy. I would be looking to have css apply whether content was built in Bricks or in Gutenberg.