Cascade layers

Every bundle opens with an explicit layer order, so the cascade is fixed before a single rule is read:

@layer blast.tokens, blast.reset, blast.base, blast.layout, blast.forms,
       blast.components, blast.motion, blast.a11y, blast.utilities;

Within a layer, normal specificity rules apply. Across layers, later layers win regardless of specificity.

Two details worth knowing:

• blast.a11y and blast.motion sit after blast.components on purpose. .b-sr-only has to be able to hide a styled component, and .b-anim-* has to be able to animate one — if they came earlier, the component rules would beat them.
• The order is declared, not inferred. A bare @layer statement pins the sequence up front, which is why you can load the subset bundles (blastcss/utilities, blastcss/components, …) in any order and still get the same result. Without it the order would fall out of whichever bundle the browser parsed first.

Why this matters

You can write:

.b-btn { background: rebeccapurple; }

…in your app stylesheet — outside any @layer — and it beats every BlastCSS rule, because unlayered styles are always more powerful than layered ones.

Adding your own layer

Insert your styles between BlastCSS layers for fine-grained control:

@layer blast.components, app, blast.utilities;

@layer app {
  .b-btn {
    /* still beats blast.components, but utilities like .bg-primary still win */
  }
}

Avoiding !important

BlastCSS only uses !important in the utilities layer, intentionally — utilities are meant to be the final say. Components and layout never use !important. If you find yourself reaching for it, you can usually solve the problem by:

1. Inserting your style in a layer after blast.components
2. Or writing it outside any layer

Reading the source

src/layers.css holds the order statement and nothing else. Every entry point imports it first, so each built bundle carries the same contract.

Each src/*.css file then declares its own layer:

/* src/components.css */
@layer blast.components {
  .b-btn { ... }
}

This means you can ship a single bundle but still get the layer structure browsers honor.