CSS @layer Generator

/* Define layer order */
@layer reset, base, components, utilities;

@layer reset {
  /* CSS reset/normalize */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer base {
  /* Base element styles */
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  /* Component styles */
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

@layer utilities {
  /* Utility classes */
  .mt-4 { margin-top: 1rem; }
  .hidden { display: none; }
}

/* Unlayered styles have highest priority */
/* .emergency { color: red !important; } */

Layer Cascade Visualization