Modern CSS Architecture
Master modern CSS layout with Flexbox, Grid, Container Queries, and design tokens — building maintainable, responsive styling with AI-generated CSS as a starting point.
Premium Course Content
This lesson is part of a premium course. Upgrade to Pro to unlock all premium courses and content.
- Access all premium courses
- 1000+ AI skill templates included
- New content added weekly
🔄 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:
| Use Case | Best Tool | Why |
|---|---|---|
| Card grid | Grid | 2D layout with consistent gaps |
| Navigation bar | Flexbox | 1D alignment with space distribution |
| Page layout | Grid | Named areas, sidebar + main |
| Button group | Flexbox | Inline alignment |
| Dashboard | Grid | Complex 2D arrangements |
| Centering | Either | Grid: place-items: center, Flex: justify-content: center; align-items: center |
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, usevar(--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-fillandminmax()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.
Knowledge Check
Complete the quiz above first
Lesson completed!