Cascade layers, and when they stop helping

Cascade layers let you say “these rules always lose to those rules” without inventing another wrapper class. For a codebase with a reset, a framework and your own styles, that is exactly the tool.

Where they stop helping is inside a layer. If your component styles fight each other, layers just move the fight somewhere quieter.

@layer reset, framework, components, utilities;

@layer components {
  .card { padding: 1.25rem; }
}

Declare the order once, at the top, and never again. The declaration line is the documentation.