Developer feedback: CSS architecture, Global Classes and reusable blocks

Hi Greenshift Team,

First of all, thank you for creating Greenshift. I really like the direction of the project and I’m currently using it to build larger, component-based WordPress websites.

However, after several days of working with GreenLight Elements, Global Classes and reusable components, I found a few issues that make it difficult to build a clean developer workflow.

1. Excessive CSS generation

Greenshift generates many identical rules for every individual block.
For example:

#gspb_container-id-gsbp-xxxxx.gspb_container{

    position:relative;

    box-sizing:border-box;

}

This rule is repeated for almost every Container on the page.

Instead, these default rules could simply exist once:

.gspb_container{

    position:relative;

    box-sizing:border-box;

}

This would reduce the generated CSS considerably.

2. ID selectors make custom CSS difficult

Almost all generated CSS uses selectors like:

#gspb_container-id-gsbp-xxxxx

Because IDs have very high specificity, it becomes difficult to build a reusable class-based CSS architecture.

For example:

.investmentCard__content{

    position:absolute;

}

can easily be overridden by generated CSS such as:

#gspb_container-id-gsbp-xxxxx.gspb_container{

    position:relative;

}

This often forces developers to use !important, which shouldn’t be necessary.

3. Global Classes are applied too late in the editor

This is probably the biggest usability issue.

If I create a Global Class containing (not custom css):

position:absolute;

the editor initially renders the block without that class.

Only afterwards does the Global Class become available.

This causes the layout inside the editor to break temporarily because the parent block is calculated before the class is applied.

4. “Clean All Design” does not always remove generated CSS

Sometimes after using Clean All Design, CSS is still generated for the block.

It looks like inlineCssStyles is not always synchronized with the current block attributes.

5. Reusable Blocks / Synced Patterns duplicate generated CSS

This one surprised me.

When using a reusable block (Synced Pattern), Greenshift outputs the generated CSS twice.

For example:

<style>

...

</style>

<style>

...

</style>

<element></element>

Both style tags contain exactly the same CSS.

It looks like the reusable component injects its CSS and then the page injects exactly the same CSS again.

This unnecessarily increases HTML size.

6. Overall developer experience

Greenshift has amazing potential for developers, especially with GreenLight Elements and Global Classes.

I would love to build projects using:

• semantic HTML
• reusable CSS classes
• CSS variables
• minimal generated CSS

At the moment I often find myself fighting generated ID-based CSS instead of building reusable components.

Suggestions

I think Greenshift could become much more developer-friendly by introducing:

• shared core CSS instead of repeating identical rules for every block
• lower CSS specificity whenever possible
• immediate application of Global Classes inside the editor
• proper invalidation of inlineCssStyles
• CSS deduplication for reusable blocks
• an optional “Developer Mode” focused on reusable classes instead of per-block generated CSS

I’m writing this as constructive feedback because I genuinely enjoy using Greenshift and I’d love to use it for more advanced projects.

Thank you for your work!

• This topic was modified 2 days, 15 hours ago by granitsa.