No Site Or Theme Root Selector

In site and theme stylesheets, do not wrap component rules in a site or theme root selector such as .siteRoot, .themeRoot, or .theme28. Write each component selector directly inside its owning @layer, with nested selectors only for that component’s descendants and states. Define site-wide or theme-wide custom properties at :root or the appropriate semantic root. A root class may remain in markup for runtime identity, but CSS must not depend on it.

Correct

@layer themePart {
    .news {
        background: var(--newsSurface);
    }
}
:root {
    --newsSurface: #272733;
}

Incorrect

@layer themePart {
    .themeRoot {
        .news {
            background: var(--newsSurface);
        }
    }
}
.theme28 {
    --footerSurface: #272733;
}

Fix

Remove the site or theme root selector and outdent its component rules one level so they sit directly inside @layer. Move shared custom properties to :root or the appropriate semantic root, then verify the compiled CSS and affected pages.