Core Concept
Design Tokens
Centralized design decisions as CSS custom properties forming a single source of truth.
:root {
/* Semantic color system */
--hue-primary: 220;
--color-primary-500: hsl(var(--hue-primary), 75%, 55%);
/* Modular spacing */
--space-base: 0.25rem;
--space-4: calc(var(--space-base) * 4);
/* Typography scale */
--font-size-scale: 1.333;
--font-size-lg: calc(1rem * var(--font-size-scale));
}
Pattern
Component Architecture
Build reusable, composable components with BEM naming and custom properties.
/* Component */
.c-card {
--card-bg: white;
--card-padding: var(--space-6);
background: var(--card-bg);
padding: var(--card-padding);
}
/* Variant */
.c-card--highlight {
--card-bg: linear-gradient(135deg, blue, purple);
}
Advanced
Container Queries
Style components based on their container size, not viewport.
.container {
container-type: inline-size;
container-name: main;
}
@container main (min-width: 60rem) {
.c-card {
--card-padding: var(--space-8);
}
}
System
Elevation System
Consistent shadow hierarchy for visual depth.
:root {
--elevation-1: 0 1px 3px hsla(0, 0%, 0%, 0.12);
--elevation-2: 0 3px 6px hsla(0, 0%, 0%, 0.15);
--elevation-3: 0 10px 20px hsla(0, 0%, 0%, 0.15);
}
.c-card {
box-shadow: var(--elevation-2);
}
.c-card:hover {
box-shadow: var(--elevation-4);
}
Utility
Utility-First CSS
Balance component and utility classes for rapid development.
/* Utility classes */
.flex { display: flex; }
.gap-4 { gap: var(--space-4); }
.p-6 { padding: var(--space-6); }
/* Usage */
Performance
CSS Optimization
Write performant CSS that minimizes reflows and repaints.
/* ✓ Efficient animations */
.smooth {
transition: transform 200ms, opacity 200ms;
}
/* Promote to GPU layer */
.accelerated {
will-change: transform;
transform: translateZ(0);
}
/* ✓ Use logical properties */
.modern {
margin-inline: auto;
padding-block: 1rem;
}