As a stylesheet grows, one layer may contain too many styles to organize comfortably. A nested cascade layer divides that layer into smaller groups, with each child layer ordered relative to its siblings. The modules layer is a candidate: it often holds most of a site's reusable component styles. section 8.1.2 section 8.2.5
@layer modules {
@layer layout { ... }
@layer theme { ... }
}
The layout and theme layers are declared inside modules. The same nested layers can also be written with dotted names, such as @layer modules.layout and @layer modules.theme. section 8.1.2
Layer priority follows the order in which layers first appear. Later layers take precedence over earlier ones when normal declarations conflict, before selector specificity is considered. Referencing an existing layer again adds styles without moving it in the priority order. For declarations marked !important, layer priority reverses. section 8.1.1 section 8.1.2
Use nested layers when a large parent layer needs a deliberate internal priority order, not simply because every component needs its own group. There is no established strategy for subdividing the modules layer; choose names and boundaries that make the stylesheet easier to change. section 8.2.5 section 8.1.2
