CSS Architecture in 2024: Design Tokens & the Modern Approach

The way we architect CSS has evolved dramatically. Gone are the days of sprawling stylesheets without structure — today’s best practices revolve around design tokens, cascade layers, and custom properties.

What Are Design Tokens?

Design tokens are the smallest pieces of your design system — they store visual design attributes like colors, spacing, and typography:

:root {
  /* Colors */
  --color-primary: hsl(258, 90%, 66%);
  --color-secondary: hsl(15, 90%, 66%);

  /* Spacing scale */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-4: 1rem;     /* 16px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.75;
}

Cascade Layers

CSS Cascade Layers (@layer) give you explicit control over specificity:

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

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer components {
  .card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }
}

Container Queries

Container queries let you style based on the container’s size, not the viewport:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { flex-direction: row; }
}

Practical Tips

1. Start with tokens — define all your raw values first
2. Use semantic aliases — --color-button-bg instead of --color-blue
3. Layer everything — avoid specificity battles with @layer
4. Test with container queries — build component-responsive layouts

Modern CSS is incredibly powerful. Embrace it!