Base layer
Register @layer base to hold element-level resets at the lowest cascade priority. Any component or utility class wins automatically — no !important needed.
▲ cascade priority increases upward
Quick implementation
/* Declare layer order upfront — lowest to highest priority */
@layer base, components, utilities, page;
@layer base {
/* Universal box model fix */
*, *::before, *::after {
box-sizing: border-box;
}
/* Remove body margin, set readable line-height */
body {
margin: 0;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Remove browser margin/padding from block elements */
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote {
margin: 0;
padding: 0;
}
/* Images should be block-level and not overflow */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* Form controls inherit the document font */
button, input, select, textarea {
font: inherit;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
}
}
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer setting up CSS cascade layers.
Goal: Write a complete @layer base block plus the @layer declaration
that establishes layer order: base, components, utilities, page.
Constraints:
- Keep it under 35 lines.
- Use only element selectors — no class names in base.
- Comment each rule group with a one-line reason.
- Cover: box-sizing, body margin/line-height, block element margin
reset, image display/max-width, form control font inheritance,
and a prefers-reduced-motion block.
- Do NOT include typography scale, color tokens, or visual styles —
base is purely structural normalization.
Framework variant: Show how to import this as a global CSS file
in Astro (src/styles/global.css) and Next.js (app/globals.css).
Return only the CSS.Why layer order must be declared upfront
The @layer base, components, utilities, page declaration at the top of your stylesheet locks in priority order regardless of where each @layer block physically appears. Without this, layers are ordered by first appearance — meaning a component library imported before your base could accidentally take precedence. With an explicit declaration, the priority stays deterministic even when CSS is split across many files and imports.
What belongs in base vs components
Element selectors only in @layer base. If a rule requires a class name, it belongs in @layer components. So button { font: inherit } is base (normalizing a browser default), but .btn { padding: 0.5rem 1rem } is a component style (a design decision). Keeping base to element selectors means you can read the entire layer in under a minute and understand every rule. Avoid visual styles in base — no colors, no font sizes, no shadows.