Class Name Namespace

Aim for single-word classes as much as possible. Separate a component role and its declared variant into class tokens on the same element: use class="hero minimal" and class="hero split", never heroMinimal or heroSplit as class names. Every variant keeps the base role so shared styles apply. Style the base with .hero and variant differences with nested &.minimal or the compound selector .hero.minimal, never the descendant selector .hero .minimal. Apply this to shared components, sites, and every theme, updating markup, selectors, and class-dependent behavior together. Keep component names, filenames, imports, and content renderer identifiers camelCase; they are not CSS class tokens. Do not mechanically split a compound word that names one cohesive semantic role. Let selector nesting express ownership instead of repeating the parent name in every child class. If sibling classes have the same prefix, that prefix may be their missing parent: move it up one level and name the children by their own roles. For example, browseDialogTitle and browseDialogContent indicate a shared browse parent with .title and .content children.

Correct

.footer {
    .cta {
        @apply block;
    }
}
.browse {
    .title {
        @apply font-semibold;
    }

    .content {
        @apply block;
    }
}
.hero {
    @apply block;

    &.minimal {
        @apply text-center;
    }
}

Incorrect

.footer {
    .footerCta { @apply block; }
}
.browseDialogTitle {
    @apply font-semibold;
}

.browseDialogContent {
    @apply block;
}

Fix

Separate component and variant class tokens on the same element, retain the base role on every variant, and update all matching selectors and class-dependent behavior across sites and themes. For descendant ownership, add the shared parent class, nest sibling selectors under it, and shorten child classes to their roles. Preserve unrelated semantic compound names and non-class identifiers.