Deactivate / Unenqueue Bricks CSS [frontend.min.css]

How To
1

QUESTION

=> Is there a way to deactivate the Bricks CSS?
=> Or maybe just a way to deactivate the enqueue of the [frontend.min.css] file?

I’d like to manage all CSS by myself (or at least most of it).

2

You can do that, but I would heavily discourage this.

add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('bricks-frontend');
  wp_deregister_style('bricks-frontend');
}, PHP_INT_MAX);  // This makes sure it gets called last

The frontend styes do a lot of heavy lifting, that you now would have to implement yourself (Popups, Accessiblity-related styling for Dropdown-Menus etc.).

My advice would be to be patient. In the Bricks 2.0 Roadmap Blogpost, it was written that they will make bricks styles less invasive, probably by useing things like @layer and :where() for the frontend-css. This technologies are now widly supported and then your CSS will override all their styles by default

1 Like
3

I will try this solution. But as you said, it may break too many things.

It would be amazing if Bricks switch to [:where()] in the future.

Thx a lot for your feedback.

4

It was confirmed that the switch to :where() is coming in Bricks 2.0.

5

If anyone using Flux Checkout or other “full-page third-party” templates comes across this thread, this might still be helpful. In these rare cases, you likely don’t want Bricks styles to interfere with your plugin templates. For example, I encountered some odd style conflicts between Bricks and the Flux Checkout plugin. Fortunately, I was able to resolve the issue by simply dequeuing Bricks styles on the checkout page using the following snippet.

function checkout_dequeue_other_css() {
	if ( ! is_checkout() ) {
		return;
	}
	wp_dequeue_style('bricks-frontend');
    wp_deregister_style('bricks-frontend');
}
add_action( 'wp_enqueue_scripts', 'checkout_dequeue_other_css', PHP_INT_MAX ); // This makes sure it gets called last.
1 Like