layers.css

The cascade layer architecture that lets utility classes override components without specificity conflicts.

_layers.css defines the cascade layer order for the framework. Layer order determines rule precedence instead of selector specificity.

@layer variables, reset, legacy, zazz, migrations;

@layer zazz {
  @layer components, utilities;
}

index.css imports _layers.css first to establish this ordering before rules are defined.

Layer precedence

Later layers override earlier layers regardless of selector specificity:

<!-- .ui-button sets background in @layer zazz.components.
     .bg-primary sets background in @layer zazz.utilities and overrides it cleanly. -->
<button class="ui-button bg-primary">Save</button>

Layer definitions

Priority order runs from lowest to highest:

Layer	Purpose	File
`variables`	Design tokens on `:root`	`_variables.css` + component token blocks
`reset`	Element baselines and control resets	`_reset.css`
`legacy`	Existing pre-Zazz CSS in migrations	App entry stylesheet
`zazz.components`	Component rules	`primitives/<name>/<name>.css`
`zazz.utilities`	Atomic utility classes	`_utilities.css`
`migrations`	Temporary translation shims for legacy class migration	Custom `migrations.css`

Inside zazz, utilities follows components, guaranteeing utility overrides.

Unlayered CSS

Rules declared outside of any @layer override all layered rules regardless of specificity:

/* Unlayered rule overrides layered components and utilities */
.ui-button {
  border-radius: 0;
}

To create custom overrides that remain structured, declare an app layer after Zazz instead:

@layer variables, reset, legacy, zazz, migrations, app;

@layer app {
  .ui-button {
    border-radius: 0;
  }
}

Legacy CSS integration

Import legacy stylesheets into @layer legacy:

@import "./legacy-app.css" layer(legacy);

Zazz component and utility styles will override legacy styles where selectors overlap.

Browser support

Cascade layers are Baseline widely available across Chrome, Edge, Firefox, and Safari.