Cascade Layers, Nesting, and Scoping

Advanced

Cascade layers, CSS nesting, and scoped stylesheets change how styles are organized and how their selectors participate in the cascade. They belong together here because all three build on the cascade, but they solve different problems: layers order groups of declarations, nesting changes how related rules are written, and scoping limits where a style rule applies and adds scoping proximity to the cascade.

Cascade layers are an explicit cascade boundary

A cascade layer groups author declarations into an explicit order. For normal declarations, a declaration in a later layer has precedence over one in an earlier layer when the declarations are otherwise competing within the same origin and importance. Layer order is established by the order in which layers are first encountered, so an author can define that order separately from selector specificity.

?

Layer order is not selector specificity

Cascade layers are considered before selector specificity. A lower-specificity selector in a later normal layer can therefore beat a much more specific selector in an earlier normal layer. Specificity still matters when competing declarations reach the same layer.

?

Important declarations reverse layer order

The layer ordering for important declarations is reversed. This lets an earlier layer establish stronger important declarations than later layers. The reversal is part of the cascade and does not mean that !important should replace ordinary layer organization.

?

Nesting keeps selector relationships together

CSS nesting lets a style rule contain another style rule. The nested selector is interpreted relative to the parent rule rather than being a preprocessor string substitution. The nesting selector & explicitly represents the elements matched by the parent rule.

?

Nesting is CSS syntax, not a new cascade

A nested rule still creates a style rule that participates in the normal cascade. Nesting changes how the rule is expressed and how its selector is constructed; it does not create a separate cascade. Because nesting interacts with specificity, the nesting selector uses specificity rules based on the parent selector list.

?

Scoped styles limit the matching region

The @scope rule limits the region in which its contained style rules can match. A scope can have a starting selector and an optional ending selector that creates a boundary. Scoping is therefore about where a rule may apply, not about creating a new selector language.

?

Scope proximity is a cascade criterion

When scoped rules otherwise compete at the relevant cascade stages, scoping proximity can distinguish them. The rule whose scope root is closer to the element being styled has greater proximity. This is different from selector specificity: proximity describes the relationship between the matched element and the scope root.

?

These mechanisms compose

Layers, nesting, and scoping can be combined. A nested rule can occur inside a layer, a layer can contain scoped rules, and nested rules can contain group rules such as @media, @supports, @layer, and @scope where the relevant specifications allow it. The mechanisms retain their separate meanings: layers affect cascade ordering, nesting supplies selector context, and scopes constrain matching and add proximity to the cascade.

?

Keep the ownership boundaries clear

The Selectors lesson owns selector forms and detailed specificity calculation. The Cascade lesson owns the core conflict-resolution algorithm, inheritance, and defaulting. This lesson owns layers, nesting syntax, and scoped styling. Values and Units remains the owner of common value types and value computation; layout lessons remain the owners of their layout algorithms.

Normative starting points:

CSS Cascading and Inheritance Level 5 — cascade layers; CSS Nesting Module Level 1 — nesting; CSS Cascading and Inheritance Level 6 — scoping.

Quick check

A good rule of thumb is to ask which mechanism you are trying to change: the order of declaration groups (layers), the way related rules are written (nesting), or the region in which rules can match (scoping). If the problem is which competing declarations win after matching, return to the Cascade lesson instead of duplicating its algorithm here.