.breakdance .bde-div is loaded for every div

[Bobolinos]

BD 1.7

The CSS code for .breakdance .bde-div is loaded for every div, please make it load once per page or make it specific. https://paste.pics/194a7a59b243a97478b02f9dbd162f9b

Not this for every div .breakdance .bde-div { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 100%; position: relative; background-size: cover; }

But this .breakdance .bde-div-9424-101 { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 100%; position: relative; background-size: cover; }

[rodolphebertozzo]

+1

[theperfectwill]

This is sounds like it is of the same principal here - #743 Duplicate OR Unneeded Css when using [breakdance_block blockid="$post_id"] OR \Breakdance\Render\render($post_id).

In that post, for each element in Breakdance, there is a default.css option for that element. That includes sections, divs, etc. If that element has actual default css to load, then it will load that css every time, when that content is stored in a different post id other than the current post id being loaded (like in a global block).

[louisreingold]

It's loaded once for every unique page or template part that uses the element. This is not a bug, this is deliberate, because it is far superior for performance and caching.

Think about it - you go to your homepage which displays:

• Header
• Footer
• A Global Block
• The Page Itself

That's four CSS files. Sure, if each use a div, the lines you showed above will be loaded four times.

But now when you go to the next page, think about what happens. The header is cached. The footer is cached. The global block CSS is cached. The only CSS you need to load is for the page itself.

Please think about the alternative, which would be to concatenate the CSS for the homepage into a single file - header, footer, global block, and page - and then deduplicate the default CSS for the div. Now when you go to any other page, all the CSS for the parts that are reused (header, footer, global block) can't be cached. This is awful from a performance standpoint. The browser is parsing vastly more CSS this way than it was using the previous method.

Any builder that doesn't do it this way suffers a performance penalty, and this is also the same reason combining already cached CSS into a single file is always bad for performance if your website has more than a single page.

[louisreingold]

There is another option discussed in the other thread - combine all the default CSS for every element into a single file on load it on every page. That is what a lot of legacy builders did, that is exactly why so many people talk so much shit about their performance, and that is one of the reasons why Breakdance so easily beats them in performance tests. (Lots of them also get stupid with the JavaScript, but that's another thread).

[thekendog]

Instead of combining everything into one CSS file, why not have one CSS file for each element that has the default styling for it? Then it only gets enqueued once and only when you need it. For instance, sections could have a CSS file called section-default.css. It gets enqueued only when a section is used and only once. It would still be cached by the browser as well. Then the individual post-whatever.css files would be the customizations done to each element.

[louisreingold]

Because there are 140+ elements, and that would necessitate 140+ separate CSS files.