Empty HTML template but CSS is from other pages

[nguyenvoanhkhoa1]

I am developing a multiple-page project editor using pageManager and now is my case:
The image below is showing an empty HTML template, but a massive CSS code. I found the reason is that there are other components on other pages.

I am not sure if I use the pageManager right or how to define component styles in the right way. Maybe the CSS selector should be selected by id but not class? I don't know. Anyone can show me a direction or document about it would be grateful.
Thank you for reading.

[artf]

Here is the documentation about component-related styles https://grapesjs.com/docs/modules/Components.html#components-css

[nguyenvoanhkhoa1]

Hi @artf , I fixed the problem by rewriting the CSS selector. My old selector used tag selector and descendant selector. I turn to BEM class so it does not happen anymore. But there are still some special case like .my-class:not(:first-child), and it appears on all my page if existed 1 component exists on one page.
Thank you for your help.

[lifeofsa]

@nguyenvoanhkhoa1 can you please explain how did you do it? I'm stuck in the same issue.?

[lifeofsa]

Ok man, thanks got it we just can't style the tag selector directly in css we have to give an id or className to them for styling... is that right?

…

On Tue, Oct 3, 2023 at 7:56 AM Nguyễn Võ Anh Khoa ***@***.***> wrote: @lifeofsa <https://github.com/lifeofsa> The docs say that we should write styles that can connect by class. With class selector, for example .class-a {...} you can connect them with class: "class-a" in the component definition. With tag name selector, there is no way to connect with the selector to clear them https://grapesjs.com/docs/modules/Blocks.html#important-caveats <http://url> — Reply to this email directly, view it on GitHub <#5414 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AT3CHAZFF2GJDD4ZQNCRWL3X5N5ELAVCNFSM6AAAAAA5C5HWQOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TCNZRGEZDS> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[nguyenvoanhkhoa1]

one more important thing is in this doc https://grapesjs.com/docs/modules/Blocks.html#important-caveats

[lifeofsa]

Got it, thanks!

…

On Thu, Oct 5, 2023 at 10:35 PM Nguyễn Võ Anh Khoa ***@***.***> wrote: one more important thing is in this doc https://grapesjs.com/docs/modules/Blocks.html#important-caveats <http://url> — Reply to this email directly, view it on GitHub <#5414 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AT3CHA4PZDQF5OU4O472N7LX53VVLAVCNFSM6AAAAAA5C5HWQOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TEMBRGQZDM> . You are receiving this because you were mentioned.Message ID: ***@***.***>