Modern CSS Architecture

🔄 Recall Bridge: In the previous lesson, you learned semantic HTML — the foundation for accessible, SEO-friendly web pages. Now let’s style those pages with modern CSS that’s responsive, maintainable, and AI-friendly.

Modern CSS is dramatically more powerful than even a few years ago. Grid, Flexbox, Container Queries, custom properties, and cascade layers solve problems that previously required JavaScript or complex hacks. AI generates CSS well — but often defaults to older patterns when modern solutions exist.

Design Tokens: Your CSS Foundation

Define once, use everywhere:

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;

  /* Spacing (8px base scale) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* Other */
  --radius-md: 0.5rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
}

AI prompt for token extraction:

Analyze this CSS file and extract all hardcoded values into CSS custom properties. Group into: colors, spacing, typography, borders, shadows. Name tokens descriptively (–color-primary, –space-4, –text-lg). Show the token definitions and refactored CSS.

CSS Grid: Two-Dimensional Layouts

Card grid (auto-responsive, no media queries):

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

Page layout (sidebar + main):

.page-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

Flexbox: One-Dimensional Alignment

Navigation bar:

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

When to use Grid vs. Flexbox:

Container Queries

Components that respond to their container, not the viewport:

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

.card {
  /* Default: compact layout */
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    /* Wide layout: horizontal */
    flex-direction: row;
  }
}

AI prompt for Container Queries:

Refactor this component’s media queries to use Container Queries. The component should adapt based on its container width, not the viewport. Show the container-type setup and the @container rules that replace @media.

Dark Mode with Custom Properties

/* Light mode (default) */
:root {
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f3f4f6;
    --color-bg: #111827;
    --color-border: #374151;
  }
}

Because all your CSS uses var(--color-text) instead of #1f2937, dark mode works by changing the token values — no CSS duplication needed.

✅ Quick Check: AI generates a responsive layout using width: 33.333% on child elements. What’s the modern replacement? (Answer: display: grid; grid-template-columns: repeat(3, 1fr); — or even better, repeat(auto-fill, minmax(250px, 1fr)) for auto-responsive behavior. Percentage widths don’t account for gaps, require margin hacks, and don’t adapt to different container sizes. Grid handles all of this natively.)

Key Takeaways

• CSS custom properties (design tokens) are the foundation of maintainable CSS: define colors, spacing, and typography once in :root, use var(--token-name) everywhere, and enable dark mode by redefining tokens in @media (prefers-color-scheme: dark) — one-line changes propagate globally
• CSS Grid with auto-fill and minmax() creates responsive card layouts in a single line that would take 20+ lines of older float-based CSS, and supports equal-height cards, consistent gaps, and auto-wrapping without media queries
• Container Queries let components respond to their container’s width instead of the viewport — making components truly reusable across different layout contexts (full-width page, sidebar, modal) without breakpoint-specific overrides

Up Next

In the next lesson, you’ll design reusable UI components — the building blocks that make up every modern interface, with AI generating first drafts you refine for production.