Global styles are overridden by theme's CSS

[catkit]

Description

I ran into an issue at a client's site after updating Gutenberg Plugin to 18.2 release at development environment. This site runs a custom Blockbase child theme with Bootstrap, WordPress, plugins and themes are all updated to their latest versions.

The issue is that some Global Styles set at the theme.json file are overridden by Bootstrap's CSS, even though it's loaded before Global Styles.

I expected theme's Global Styles would override any other libraries I use to develop my theme.

Step-by-step reproduction instructions

I investigated what's happening and I understand it's because some Global Styles selectors have been replaced with less specific ones at this PR #60106

Screenshots, screen recording, code snippet

Like for example, Global Styles rules that would be applied to body element :

body {
    background-color: var(--wp--preset--color--cc-ice);
    color: var(--wp--preset--color--cc-black);
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--custom--font-sizes--normal);
    font-weight: var(--wp--custom--body--typography--font-weight);
    line-height: var(--wp--custom--body--typography--line-height);
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

now are applied to :where(body)

:where(body) {
    background-color: var(--wp--preset--color--cc-ice);
    color: var(--wp--preset--color--cc-black);
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--custom--font-sizes--normal);
    font-weight: var(--wp--custom--body--typography--font-weight);
    line-height: var(--wp--custom--body--typography--line-height);
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

I can fix this by customizing Bootstrap and compiling my own Bootstrap CSS, I haven't done that because this is double work.

So I guess this will be an issue for other themes and plugins that use third party libraries or that have their own CSS, many times required to work.

Environment info

• WordPress 6.5.3, Gutenberg 18.3, Blockbase 3.1.17 + Child theme with Bootstrap 5.3
• All browsers
• All devices

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

cc @tellthemachines

[tellthemachines]

Thanks for the feedback @catkit!

The global styles were deliberately reduced to minimum specificity to enable the ongoing work on extending block style variations for the new section styling feature (see #57537). Given these styles are core-generated, they should have had minimum specificity from the start, but there were a few obstacles that had to be sorted out before we were in a position to do so.

I can fix this by customizing Bootstrap and compiling my own Bootstrap CSS, I haven't done that because this is double work.

I'm afraid that this is the best way forward here. If it's any consolation, global styles are already at minimum specificity, so they can't go any lower than that!

At some point there will be an investigation into adopting CSS layers to make it easier for themes to have control over which styles are overridden - see discussion in #51128 and #57841 - but that's unlikely to be implemented very soon, so in the meantime the best approach is to reduce specificity of any third party resets, libraries etc. where needed.

I'm going to go ahead and close this issue as it's not a bug, but expected behaviour.