Component file structure for 2026

The "5 files" structure that scales

/styles
  ├── reset.css         # box-sizing, zero margins
  ├── tokens.css        # :root { --primary: ... }
  ├── base.css          # body, h1-h6, a defaults
  ├── components/       # one file per component
  │   ├── button.css
  │   ├── card.css
  │   ├── nav.css
  │   └── ...
  └── utilities.css     # .text-center, .sr-only, etc.

Then a single main.css imports them in @layer order:

@layer reset, tokens, base, components, utilities;

@import url("./reset.css") layer(reset);
@import url("./tokens.css") layer(tokens);
@import url("./base.css") layer(base);
@import url("./components/button.css") layer(components);
@import url("./components/card.css") layer(components);
@import url("./utilities.css") layer(utilities);

Why this structure

• Layers mean specificity wars are dead.
• One file per component scales to 100+ components without merge conflicts.
• Tokens centralized — change a color, every component updates.
• Utilities last — overrides ANY component when applied to a specific element.

When to add @scope

Add @scope (.card) inside components/card.css to namespace child selectors WITHOUT writing .card 50 times.

Tailwind users: same structure, fewer files

Tailwind users don't ship many .css files. Their structure is:

/styles
  ├── tailwind.css           # @tailwind base; @tailwind components; @tailwind utilities;
  └── tokens.css             # @theme { --color-primary: ... }

Tailwind 4 added a @theme directive for tokens, replacing tailwind.config.js for most projects.