No Direct Child Selectors

Do not use direct child selectors in site or theme CSS. Instead, provide more specific semantic classes for your JSX and HTML and target them with descendant selectors.

Philosophy

Direct child selectors tightly couple CSS to the nesting structure of JSX and HTML, so adding or removing a wrapper can break styling. Selectors should express semantic relationships through meaningful class names rather than depend on the physical nesting of elements.

Correct

Give the section heading a specific semantic class in JSX or HTML.

.disclosures {
    .sectionHeading {
        @apply mb-10;
    }
}

Incorrect

.disclosures {
    > .container > .heading {
        @apply mb-10;
    }
}

Fix

Add specific semantic classes to the affected JSX or HTML elements and replace direct child combinators with descendant selectors that target those classes.