Modern CSS Techniques and Best Practices

Introduction

CSS has evolved significantly in recent years. Modern features like Grid, Flexbox, Custom Properties, and Container Queries have transformed how we build layouts and design systems.

CSS Grid for Complex Layouts

Basic Grid Layout

css
1.container {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
4  grid-gap: 20px;
5  padding: 20px;
6}
7
8.card {
9  background: white;
10  border-radius: 12px;
11  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
12  padding: 24px;
13}
Copy

Advanced Grid Patterns

css
1/* Holy Grail Layout */
2.holy-grail {
3  display: grid;
4  grid-template-areas:
5    "header header header"
6    "nav content sidebar"
7    "footer footer footer";
8  grid-template-columns: 200px 1fr 200px;
9  grid-template-rows: auto 1fr auto;
10  min-height: 100vh;
11}
12
13.header { grid-area: header; }
14.nav { grid-area: nav; }
15.content { grid-area: content; }
16.sidebar { grid-area: sidebar; }
17.footer { grid-area: footer; }
18
19/* Responsive Grid */
20.responsive-grid {
21  display: grid;
22  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
23  gap: 24px;
24  
25  @media (max-width: 768px) {
26    grid-template-columns: 1fr;
27    gap: 16px;
28  }
29}
Copy

Flexbox for Component Layouts

css
1/* Card Component */
2.card {
3  display: flex;
4  flex-direction: column;
5  gap: 16px;
6  padding: 24px;
7  background: var(--surface);
8  border-radius: 12px;
9  border: 1px solid var(--border);
10}
11
12.card-header {
13  display: flex;
14  align-items: center;
15  justify-content: space-between;
16  gap: 12px;
17}
18
19.card-content {
20  flex: 1;
21}
22
23.card-footer {
24  display: flex;
25  gap: 8px;
26  justify-content: flex-end;
27}
28
29/* Navigation Bar */
30.navbar {
31  display: flex;
32  align-items: center;
33  justify-content: space-between;
34  padding: 16px 24px;
35  background: var(--background);
36  border-bottom: 1px solid var(--border);
37}
38
39.nav-links {
40  display: flex;
41  gap: 32px;
42  align-items: center;
43}
44
45@media (max-width: 768px) {
46  .navbar {
47    flex-direction: column;
48    gap: 16px;
49  }
50  
51  .nav-links {
52    flex-direction: column;
53    gap: 12px;
54  }
55}
Copy

CSS Custom Properties (CSS Variables)

Design System with Variables

css
1:root {
2  /* Colors */
3  --primary: #6366f1;
4  --primary-dark: #4f46e5;
5  --secondary: #10b981;
6  
7  /* Typography */
8  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
9  --font-size-sm: 0.875rem; /* 14px */
10  --font-size-base: 1rem;   /* 16px */
11  --font-size-lg: 1.125rem; /* 18px */
12  --font-size-xl: 1.25rem;  /* 20px */
13  
14  /* Spacing */
15  --spacing-xs: 0.25rem;  /* 4px */
16  --spacing-sm: 0.5rem;   /* 8px */
17  --spacing-md: 1rem;     /* 16px */
18  --spacing-lg: 1.5rem;   /* 24px */
19  --spacing-xl: 2rem;     /* 32px */
20  
21  /* Borders */
22  --border-radius-sm: 4px;
23  --border-radius-md: 8px;
24  --border-radius-lg: 12px;
25  --border-radius-full: 9999px;
26  
27  /* Shadows */
28  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
29  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
30  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
31  
32  /* Transitions */
33  --transition-fast: 150ms ease-in-out;
34  --transition-base: 250ms ease-in-out;
35  --transition-slow: 350ms ease-in-out;
36}
37
38/* Dark mode */
39@media (prefers-color-scheme: dark) {
40  :root {
41    --background: #0f172a;
42    --surface: #1e293b;
43    --text: #f8fafc;
44    --text-muted: #94a3b8;
45    --border: #334155;
46  }
47}
48
49/* Light mode */
50@media (prefers-color-scheme: light) {
51  :root {
52    --background: #ffffff;
53    --surface: #f8fafc;
54    --text: #0f172a;
55    --text-muted: #64748b;
56    --border: #e2e8f0;
57  }
58}
59
60/* Component usage */
61.button {
62  background: var(--primary);
63  color: white;
64  padding: var(--spacing-sm) var(--spacing-md);
65  border-radius: var(--border-radius-md);
66  border: none;
67  font-family: var(--font-family);
68  font-size: var(--font-size-base);
69  transition: background var(--transition-fast);
70  
71  &:hover {
72    background: var(--primary-dark);
73  }
74}
Copy

Container Queries

css
1/* Container setup */
2.card-container {
3  container-type: inline-size;
4  container-name: card;
5}
6
7/* Styles based on container size */
8@container card (max-width: 400px) {
9  .card {
10    flex-direction: column;
11    text-align: center;
12  }
13  
14  .card-image {
15    width: 100%;
16    height: 200px;
17  }
18}
19
20@container card (min-width: 401px) {
21  .card {
22    flex-direction: row;
23    align-items: center;
24  }
25  
26  .card-image {
27    width: 150px;
28    height: 150px;
29  }
30}
Copy

Modern Selectors

css
1/* :is() selector for grouping */
2av :is(ul, ol) > li {
3  margin-bottom: 8px;
4}
5
6/* :where() selector for specificity */
7.card :where(h2, h3, h4) {
8  margin-top: 0;
9  color: var(--text);
10}
11
12/* :has() selector for parent selection */
13.card:has(.featured) {
14  border: 2px solid var(--primary);
15  background: linear-gradient(135deg, var(--primary) 0%, transparent 100%);
16}
17
18/* Focus-visible for better accessibility */
19.button:focus-visible {
20  outline: 2px solid var(--primary);
21  outline-offset: 2px;
22}
Copy

CSS Animation and Transitions

css
1/* Keyframe animation */
2@keyframes fadeIn {
3  from {
4    opacity: 0;
5    transform: translateY(20px);
6  }
7  to {
8    opacity: 1;
9    transform: translateY(0);
10  }
11}
12
13@keyframes slideIn {
14  from {
15    transform: translateX(-100%);
16  }
17  to {
18    transform: translateX(0);
19  }
20}
21
22@keyframes pulse {
23  0%, 100% {
24    opacity: 1;
25  }
26  50% {
27    opacity: 0.5;
28  }
29}
30
31/* Usage */
32.card {
33  animation: fadeIn 0.3s ease-out;
34}
35
36.loading {
37  animation: pulse 2s infinite;
38}
39
40.sidebar {
41  animation: slideIn 0.3s ease-out;
42}
43
44/* Transition utilities */
45.transition-all {
46  transition: all var(--transition-base);
47}
48
49.transition-colors {
50  transition: color var(--transition-fast), 
51              background-color var(--transition-fast), 
52              border-color var(--transition-fast);
53}
54
55.transition-transform {
56  transition: transform var(--transition-base);
57}
58
59/* Hover effects */
60.button {
61  @extend .transition-colors;
62  
63  &:hover {
64    transform: translateY(-2px);
65    box-shadow: var(--shadow-lg);
66  }
67  
68  &:active {
69    transform: translateY(0);
70  }
71}
Copy

Performance Optimization

css
1/* Reduce layout thrashing */
2.optimized {
3  will-change: transform, opacity;
4}
5
6/* GPU acceleration for animations */
7.animate-gpu {
8  transform: translateZ(0);
9  backface-visibility: hidden;
10  perspective: 1000px;
11}
12
13/* Reduce paint operations */
14.fixed-element {
15  position: fixed;
16  top: 0;
17  left: 0;
18  right: 0;
19  z-index: 1000;
20  /* Use transform for animations instead of top/left */
21  transform: translate3d(0, 0, 0);
22}
23
24/* Optimize font loading */
25@font-face {
26  font-family: 'Inter';
27  font-style: normal;
28  font-weight: 400;
29  font-display: swap;
30  src: url('/fonts/inter-regular.woff2') format('woff2');
31}
32
33/* Critical CSS inlining */
34.critical {
35  /* Inline critical styles for above-the-fold content */
36}
37
38/* Lazy loading for images */
39img {
40  max-width: 100%;
41  height: auto;
42  loading: lazy;
43}
Copy

Utility-First CSS with Modern Features

css
1/* Utility classes */
2.gap-0 { gap: 0; }
3.gap-1 { gap: 4px; }
4.gap-2 { gap: 8px; }
5.gap-3 { gap: 12px; }
6.gap-4 { gap: 16px; }
7
8.grid { display: grid; }
9.flex { display: flex; }
10.inline-flex { display: inline-flex; }
11
12.flex-col { flex-direction: column; }
13.flex-row { flex-direction: row; }
14.flex-wrap { flex-wrap: wrap; }
15
16.items-center { align-items: center; }
17.items-start { align-items: flex-start; }
18.items-end { align-items: flex-end; }
19.items-stretch { align-items: stretch; }
20
21.justify-center { justify-content: center; }
22.justify-between { justify-content: space-between; }
23.justify-around { justify-content: space-around; }
24.justify-evenly { justify-content: space-evenly; }
25
26/* Responsive utilities */
27@media (min-width: 640px) {
28  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
29  .sm\:flex-row { flex-direction: row; }
30}
31
32@media (min-width: 768px) {
33  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
34}
35
36@media (min-width: 1024px) {
37  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
38}
Copy

CSS-in-JS with Emotion/Styled-Components Alternative

css
1/* Using CSS Modules with modern features */
2/* styles.module.css */
3
4.container {
5  display: grid;
6  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
7  gap: var(--spacing-lg);
8  padding: var(--spacing-xl);
9  
10  /* Container query support */
11  container-type: inline-size;
12}
13
14.card {
15  background: var(--surface);
16  border-radius: var(--border-radius-lg);
17  border: 1px solid var(--border);
18  padding: var(--spacing-lg);
19  transition: all var(--transition-base);
20  
21  &:hover {
22    transform: translateY(-4px);
23    box-shadow: var(--shadow-lg);
24    border-color: var(--primary);
25  }
26  
27  /* Container query */
28  @container (max-width: 400px) {
29    text-align: center;
30    
31    .cardImage {
32      margin: 0 auto;
33    }
34  }
35}
36
37.cardHeader {
38  display: flex;
39  align-items: center;
40  justify-content: space-between;
41  margin-bottom: var(--spacing-md);
42  
43  @container (max-width: 400px) {
44    flex-direction: column;
45    gap: var(--spacing-sm);
46  }
47}
48
49.badge {
50  display: inline-flex;
51  align-items: center;
52  gap: 4px;
53  padding: 4px 8px;
54  background: var(--primary);
55  color: white;
56  border-radius: var(--border-radius-full);
57  font-size: var(--font-size-sm);
58  font-weight: 500;
59}
Copy

Testing and Debugging

css
1/* Debug utilities */
2.debug * {
3  outline: 1px solid red !important;
4}
5
6.debug-grid {
7  background-image: linear-gradient(to right, #80808030 1px, transparent 1px),
8                    linear-gradient(to bottom, #80808030 1px, transparent 1px);
9  background-size: 24px 24px;
10}
11
12/* Print styles */
13@media print {
14  .no-print {
15    display: none !important;
16  }
17  
18  body {
19    font-size: 12pt;
20    line-height: 1.5;
21  }
22  
23  a {
24    color: black !important;
25    text-decoration: underline !important;
26  }
27  
28  img {
29    max-width: 100% !important;
30  }
31}
32
33/* Reduced motion */
34@media (prefers-reduced-motion: reduce) {
35  *,
36  *::before,
37  *::after {
38    animation-duration: 0.01ms !important;
39    animation-iteration-count: 1 !important;
40    transition-duration: 0.01ms !important;
41  }
42}
Copy