Theme Abstraction

Keep site and theme selectors abstract and reusable across parts. Style semantic roles such as list, item, title, and actions first. Use a domain class supplied by a part only when that domain needs a distinct treatment, such as .list.videos or .item.video. Keep visual presentation decisions in CSS rather than adding visual classes to JSX. Users must be able to create and reorder data-composed pages from registered parts through the admin interface without developers or AI adding page-specific code. Themes and runnable site processes must not contain routes, renderers, selectors, content, or composition keyed to an individual dynamic page, its slug, or its section keys. Do not style a reusable part through the dynamic renderer page wrapper, such as .dynamicPage [data-ui-part="callToAction"]. Resolve registered parts through shared infrastructure and give each reusable component its own theme appearance, independent of its containing page. A new page using existing parts must require only runtime content and configuration.

Correct

@layer themePart {
    .list {
        .item {
            .title {
                @apply font-semibold;
            }

            .actions {
                @apply flex;
            }
        }
    }
}

Incorrect

.videoItem {
    .videoTitle {}
    .videoActions {}
}

Fix

Move shared declarations to role selectors and keep only genuine domain differences in combined role-and-domain selectors. Remove page-specific code and page-wrapper styling from themes and runnable sites; place missing behavior in an existing reusable component and let runtime data select and compose registered parts.