Hey Bricks Family!
Over the past few weeks, I’ve noticed that Bricks will sometimes store and serve the exact same CSS rules multiple times. Is this to be expected?
I’m assuming this is due to repeated elements on a page but it seems redundant and wasteful for files being served. Any thoughts on this?
Perhaps I’m missing a setting or documentation details on how to disable this.
I noticed the same and wondered too! would like to hear from the devs on this.
I searched for duplicate css and found this post which sounds like it could be a related issue that they are working on
I’m seeing exactly the same thing and am wondering if this will be fixed in v1.8.
I’m experiencing the same issue. Using 1.8 beta right now and I’m guessing this is just the first time I’m noticing it, since the issue seems to have been around for a while now.
Also cf. my own thread:
Hey guys 
I am currently working on the duplicate CSS issue in regard to the “Template” element as mentioned in this thread: WIP: Echo a template shortcode duplicate all the inline CSS on the page
Do you experience the duplicate CSS when rendering a template (either via the shortcode or the Bricks “Template” element)? Or through different setup?
If you could share the live URL of the page the duplicate CSS occurs, that’d be great. Thank you.
Hey Thomas, I’m on my other PC right now (the Porsche ;-)) and I can’t check, but I believe I have a Template element at the bottom of the affected page to pull in my CTA section.
Once I’m back at my main PC where I keep the build, I’ll put it online and send the link here. If you like, I’ll be happy to make you a user account, too.
Hi Thomas,
This is happening on any element that has a custom css class.
Inspecting a page, the duplicate css is in that page’s css file. Following the source location links on both the disabled and enabled duplicates shows either multiple ‘BREAKPOINT: Desktop (BASE) */’ definitions for the same class, or the source link for the enabled class leads to a totally random location with no definition.
Take a look at this page, currently under development: Alfington church – Otter Vale Churches
Look at the second section with the class o-church-location and you’ll see duplicate css on a custom class that simply adds a coloured background (o-bg-pale-1a).
Within that section there is a div with a shortcode that has a class o-leaflet-map. There is duplicate css here too. However, the leaflet map stuff that has no custom styling doesn’t have duplicate css.
If you then look at the next section with the class o-officers, there is duplicate css. Then drill down to the second container (ul) with the class o-officers-grid and there is duplicate css there. Each li also has duplicate css.
Finally, drill down through the section o-aand-f and any element that has a custom class on it has duplicate css including images.
Hope this helps.
OK, this gets more weird. I just created a new page and added my page template (via the template element) for the hero banner, then added a couple of sections and content. In one of the sections I put an image that I styled temporarily at the ID level for a quick look, setting HTML tag to picture, object fit to cover, and caption type to no caption. Having saved the page I inspected it and on both the picture and image there is duplicated css. Looking at the source links, the disabled css is in the new page’s CSS file whilst the enabled CSS is in the page template’s css file. This is different to what I described in the previous post where the css is in the page’s css file.
The link to the page is Care for creation – Otter Vale Churches. Check out the second section after the template and then drill down to the picture.
Thank you very much. I can replicate & confirm the duplicated global class CSS. We are working on a fix
This is causing, when editing on the canvas, that if you want to modify a previously saved value, the changes are not reflected in the visual editor.
