Compound Classes

In CSS for sites, themes, panels, and shared client components, separate independently meaningful concepts into class tokens instead of joining them into compound names. Use class="cards bento" instead of cardsBento and class="product details" instead of productDetails. Assign each class separately to the same element so the component or domain role and its layout, section, variant, or state can be composed independently. Define shared behavior on the base class and combination-specific differences with .cards.bento or nested &.bento, and .product.details or nested &.details. A space in markup joins classes on one element; .cards .bento in CSS selects a descendant and is not an equivalent replacement. This rule applies to ordinary CSS independently of Tailwind. Keep component names, filenames, imports, and other non-class identifiers camelCase.

Philosophy

Separate classes make composition possible without copying rules or creating a new compound name for every combination. The cards class supplies the shared collection structure while bento selects its arrangement; the same cards can take another layout and the same bento concept can be reused wherever that arrangement makes sense. The product class supplies product behavior while details identifies the detailed presentation, allowing other presentations to retain the same product foundation. Assigning these concepts independently lets a component change one concern while preserving the others. Shared rules belong to their owning role, and combined selectors express only the differences that require both concepts, avoiding accidental effects on unrelated elements.

Correct

Assign the concepts separately on the same element: class="cards bento" and class="product details".

.cards {
    display: grid;

    &.bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.product {
    display: grid;

    &.details {
        gap: 1rem;
    }
}

Incorrect

Avoid markup such as class="cardsBento" and class="productDetails".

.cardsBento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.productDetails {
    display: grid;
    gap: 1rem;
}

Fix

Replace compound class names with separate semantic tokens in markup, CSS selectors, scripts, and tests. Keep the base role on each variant, reuse each token where its meaning applies, and scope combination-specific styles with combined selectors or nested & selectors.