Duplicate OR Unneeded Css when using [breakdance_block blockid="$post_id"] OR \Breakdance\Render\render($post_id)

[theperfectwill]

What version of Breakdance are you using?

v1.2.1 and 1.3 alpha 1

What browser are you using?

Brave (Chromium)

What operating system are you using?

macOS

Reproduction Steps

Just let me know if there is something I should test/or change.

When having multiple instances of the shortcode [breakdance_block blockid="$post_id"] OR when echo \Breakdance\Render\render($post_id); is called for Breakdance content outside of the currently displayed post.

There are multiple instances of unneeded (duplicate) css generated where used, OR css that should have an ID prefixed to it, so it only applied to content generated from that post, and not global applied to the page where the shortcode or global element is inserted. I hope that makes sense, because then it becomes complicated to overwrite the css.

You can view the screenshots below of what I mean. Correct me if I am wrong, but all these styles seem to be styles that should be explicitly part of the "Global Styles" file. Which brings me to also mention a feature suggestion.

That suggestion is a "Global Elements"

A Proposed (brainstorm) Solution

The screenshot below is what I mean about having a specific section to style global elements of Breakdance, which then would be generated into a "global-elements.css" file, to avoid the issue above, while creating a specific section for users to customize the default style of certain elements.

Facebook Post Reference: https://www.facebook.com/groups/breakdanceofficial/posts/5999883150046930/

[theperfectwill]

Update

I discovered the issue here, and a little adjusted it myself, but I think it is still an issue of bloat in a sense, or just duplicate css.

What happens is, the default.css of an element is uniquely generated each time that element is rendered from the use of [breakdance_block blockid="$post_id"] OR echo \Breakdance\Render\render($post_id);

My Temporary Fix

What I did for some very common elements, like Section, columns, column, and Rich_Text, was copy the default.css out of each of those elements, and added it to the Global Settings > Code > CSS. Leaving the default.css of each of those elements empty.

This on the frontend, removes the duplicate css (as from the previous screenshots), while still maintain the defaults styles for those elements, to only be loaded once from the global-settings.css files.

Question

What do you think should be done in this case? As this obviously affects other elements being rendered through [breakdance_block blockid="$post_id"] OR echo \Breakdance\Render\render($post_id);

[a-dubiel]

Hey @theperfectwill thanks for your report and suggestions. I will pass this internally to see what we can do about this.

[theperfectwill]

Hi. Ok.

To add to the thread, what I did was move all the default.css to one file called element-defaults.css.

I'm not sure what might be most performance friendly in comparison, but perhaps an Admin > Element Settings page, where the elements can be selected by the user, for which elements they want to use, and then to generate the element-defaults.css based on their chosen elements. The full file of element defaults in Alpha 1.3 is 106.kb. And then in /breakdance/plugin/render/element-default-css.php I set define('INCLUDE_DEFAULT_CSS_RULES_IN_POST_CSS_CACHE', false);.

This is just one idea, or brainstorm.

For me, I'd rather have one standard 106.kb file loading everywhere, then I can run an UnusedCss anyhow to remove the unused css from it, than to still have an UnusedCss scan not be able to remove the duplicate css from the multiple default.css files generated.

[louisreingold]

The reason we don't do this is because most sites don't use anywhere close to all the elements so we'd be loading a lot of stuff that is never used, so the performance for 99% of users is far better with our approach, even though it means a tiny amount of CSS is duplicated.