Component layer
Declare @layer components to contain reusable UI patterns. Component styles override base automatically, and utility classes in a higher layer still win — no specificity hacks.
@layer components output
Card component
Defined once in @layer components, reused everywhere. Utilities like mt-4 still override it.
Quick implementation
@layer components {
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
border-radius: 0.375rem;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
border: none;
transition: background 0.15s, transform 0.1s;
}
.btn--primary {
background: oklch(0.52 0.22 265);
color: oklch(0.98 0 0);
}
.btn--primary:hover {
background: oklch(0.60 0.22 265);
}
.card {
background: oklch(0.19 0.02 260);
border: 1px solid oklch(0.28 0.02 260);
border-radius: 0.75rem;
padding: 1.5rem;
}
.card__title {
font-weight: 700;
margin-bottom: 0.5rem;
}
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer building a CSS component library
using @layer components.
Goal: Write a @layer components block containing: a .btn base style
with .btn--primary and .btn--ghost variants, a .card with a
.card__title sub-element, and a .badge component.
Constraints:
- Use CSS custom properties for colors and spacing — no hard-coded
hex values.
- Keep each component to structural + visual defaults only; spacing
overrides belong in utilities or page layers.
- Include :hover and :focus-visible states for interactive elements.
- Ensure focus rings pass WCAG 2.1 AA (3px outline with offset).
- Components should work in both light and dark themes by referencing
semantic tokens like var(--color-bg) and var(--color-text).
Framework variant: Show how to split components into separate files
(btn.css, card.css) and combine them with @import into a single
components layer.
Return only the CSS.Components vs utilities in the cascade
A utility class like .mt-4 { margin-top: 1rem } in @layer utilities correctly overrides a component's margin-top even if the utility has lower specificity — because layer order beats specificity. This is the main reason to use layers for design systems: you never need !important to make a utility win over a component.
Keep components structural, not spacious
A component should define its visual identity (background, border, border-radius, typography) but leave spacing neutral. Hardcoding margin-bottom: 2rem on a card creates problems when the card is used in contexts requiring different spacing. Instead, let consuming code add spacing via utilities or layout containers. This keeps components truly reusable.