Cascade Layers

CSS cascade layers refer to the order in which CSS rules are applied to an HTML element.

Cerberus relies on CSS cascade layers to provide a predictable, performant way to override components. The layers are defined to match that of Panda CSS.

Layer Types

Cerberus supports these cascade layer types:

@layer reset: Where the preflight or css resets styles are defined.
@layer base: Where global styles are placed when defined in globalCss config property.
@layer recipes: Where styles for recipes are placed when defined in theme.recipes or theme.slotRecipes
@layer tokens: Where styles for design tokens are placed when defined in theme.tokens or theme.semanticTokens
@layer utilities: Where styles for utilities are placed when defined in theme.utilities

Layer Order

Cerberus recommends the following order for cascade layers:

@layer reset, base, tokens, recipes, utilities;

This structure allows for smoother experience when combining Cerberus and Panda CSS in the same project.

On this page

Edit this page on Github