About
Project
Articles
Modern CSS: Grid, Flexbox, and Component-First Design
Modern CSS: Grid, Flexbox, and Component-First DesignJanuary 25, 2024

Modern CSS: Grid, Flexbox, and Component-First Design

Master modern CSS with Grid and Flexbox layouts. Learn how to build responsive designs, implement component-first methodologies, and optimize CSS for performance in large applications.

Table of Contents

  1. Modern CSS Overview
  2. CSS Grid Mastery
  3. Flexbox Deep Dive
  4. Responsive Design Patterns
  5. Component-First CSS
  6. CSS Architecture
  7. Performance Optimization
  8. Advanced Techniques
  9. Best Practices
  10. Tools and Workflow

Modern CSS Overview {#overview}

Modern CSS has evolved significantly, providing powerful layout systems, responsive design capabilities, and maintainable architecture patterns. This comprehensive guide covers the essential modern CSS techniques that every developer should master.

Key Modern CSS Features

  • CSS Grid: Two-dimensional layout system for complex designs
  • Flexbox: One-dimensional layout for flexible components
  • Custom Properties: CSS variables for dynamic styling
  • Container Queries: Element-based responsive design
  • Logical Properties: Writing-mode aware styling
  • Subgrid: Nested grid layouts

Why Modern CSS Matters

  1. Developer Experience: Less complex layouts, cleaner code
  2. Performance: Native browser optimizations
  3. Maintainability: Logical, structured CSS architecture
  4. Responsive Design: Better mobile-first approaches
  5. Accessibility: Semantic layout patterns

CSS Grid Mastery {#css-grid}

CSS Grid is the most powerful layout system in CSS, enabling complex two-dimensional layouts with ease.

Basic Grid Concepts

/* Basic Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
}

Grid Template Areas

/* Named Grid Areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.header {
  grid-area: header;
  background: #3b82f6;
  color: white;
  padding: 1rem;
}

.sidebar {
  grid-area: sidebar;
  background: #f3f4f6;
  padding: 1rem;
}

.main {
  grid-area: main;
  background: white;
  padding: 1rem;
}

.aside {
  grid-area: aside;
  background: #f9fafb;
  padding: 1rem;
}

.footer {
  grid-area: footer;
  background: #374151;
  color: white;
  padding: 1rem;
}

Responsive Grid Layouts

/* Auto-Fit Grid with Minimum Width */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

/* Dynamic Grid based on content */
.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}

/* Responsive Grid with Breakpoints */
.breakpoint-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .breakpoint-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .breakpoint-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Advanced Grid Techniques

/* Subgrid (where supported) */
.subgrid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.subgrid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

/* Grid with Fractional Units and Fixed Columns */
.complex-grid {
  display: grid;
  grid-template-columns: 
    minmax(200px, 250px)  /* Sidebar */
    minmax(0, 1fr)        /* Main content */
    minmax(150px, 200px); /* Aside */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Grid Line Names */
.named-lines {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end main-start] 1fr 
    [main-end aside-start] 200px 
    [aside-end];
}

.content {
  grid-column: main-start / main-end;
}

Grid Animation and Transitions

/* Smooth Grid Transitions */
.animated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  transition: grid-template-columns 0.3s ease;
}

.grid-item {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: transform 0.2s ease;
}

.grid-item:hover {
  transform: translateY(-4px);
}

/* Expanding Grid Item */
.expandable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.expandable-item {
  grid-column: span 1;
  transition: grid-column 0.3s ease;
}

.expandable-item.expanded {
  grid-column: span 2;
}

Flexbox Deep Dive {#flexbox}

Flexbox is perfect for one-dimensional layouts and component-level design patterns.

Flexbox Fundamentals

/* Basic Flex Container */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.flex-item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 0.5rem;
}

/* Flex Item Controls */
.flex-grow {
  flex-grow: 2; /* Takes twice as much space */
}

.flex-fixed {
  flex: 0 0 200px; /* Fixed width, no grow/shrink */
}

.flex-shrink {
  flex-shrink: 2; /* Shrinks twice as fast */
}

Common Flexbox Patterns

/* Center Everything */
.center-all {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Navigation Bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3b82f6;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Card Component */
.card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 1.5rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.card-body {
  flex: 1;
  padding: 1.5rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Responsive Flexbox

/* Responsive Flex Direction */
.responsive-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .responsive-flex {
    flex-direction: row;
  }
}

/* Flex Wrap for Responsive Design */
.flex-wrap-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: -0.5rem;
}

.flex-wrap-item {
  flex: 1 1 300px; /* Minimum width of 300px */
  margin: 0.5rem;
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 0.5rem;
}

/* Responsive Navigation */
.responsive-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .responsive-nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav-menu {
    flex-direction: row;
    gap: 2rem;
  }
}

Responsive Design Patterns {#responsive-design}

Modern responsive design goes beyond simple breakpoints to create fluid, adaptive layouts.

Container Queries

/* Container Queries (where supported) */
.component-container {
  container-type: inline-size;
  container-name: component;
}

@container component (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  
  .card-image {
    flex: 0 0 150px;
  }
  
  .card-content {
    flex: 1;
  }
}

@container component (min-width: 600px) {
  .card-title {
    font-size: 1.5rem;
  }
  
  .card-actions {
    justify-content: flex-end;
  }
}

Fluid Typography

/* Fluid Typography using clamp() */
.fluid-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.5;
}

.heading-large {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
}

.heading-medium {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.3;
}

/* Responsive Spacing */
.section {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(1rem, 3vw, 3rem);
}

Responsive Grid Systems

/* Custom Grid System */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.col {
  grid-column: span 12;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (min-width: 768px) {
  .md\:col-1 { grid-column: span 1; }
  .md\:col-2 { grid-column: span 2; }
  .md\:col-3 { grid-column: span 3; }
  .md\:col-4 { grid-column: span 4; }
  .md\:col-6 { grid-column: span 6; }
  .md\:col-8 { grid-column: span 8; }
  .md\:col-9 { grid-column: span 9; }
  .md\:col-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .lg\:col-1 { grid-column: span 1; }
  .lg\:col-2 { grid-column: span 2; }
  .lg\:col-3 { grid-column: span 3; }
  .lg\:col-4 { grid-column: span 4; }
  .lg\:col-6 { grid-column: span 6; }
  .lg\:col-8 { grid-column: span 8; }
  .lg\:col-9 { grid-column: span 9; }
  .lg\:col-12 { grid-column: span 12; }
}

Responsive Images

/* Responsive Image Container */
.image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
}

.responsive-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Aspect Ratio Control */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-square {
  aspect-ratio: 1 / 1;
}

/* Object Fit for Images */
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contain-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

Component-First CSS {#component-first}

Component-first CSS architecture focuses on building reusable, self-contained components.

Component Structure

/* Button Component */
.btn {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* Prevent text selection */
  user-select: none;
  
  /* Focus styles */
  &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }
  
  /* Disabled styles */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

/* Button Variants */
.btn--primary {
  background-color: #3b82f6;
  color: white;
  
  &:hover:not(:disabled) {
    background-color: #2563eb;
  }
  
  &:active {
    background-color: #1d4ed8;
  }
}

.btn--secondary {
  background-color: #6b7280;
  color: white;
  
  &:hover:not(:disabled) {
    background-color: #4b5563;
  }
}

.btn--outline {
  background-color: transparent;
  color: #3b82f6;
  border: 1px solid #3b82f6;
  
  &:hover:not(:disabled) {
    background-color: #3b82f6;
    color: white;
  }
}

/* Button Sizes */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn--full {
  width: 100%;
}

Card Component

/* Card Component */
.card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

.card__header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  
  &--bordered {
    border-bottom: 2px solid #3b82f6;
  }
}

.card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.card__subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.card__body {
  padding: 1.5rem;
}

.card__footer {
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card Variants */
.card--elevated {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  &:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
}

.card--flat {
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

Form Components

/* Form Field Component */
.form-field {
  margin-bottom: 1.5rem;
}

.form-field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.form-field__input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  
  &:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
  }
  
  &:invalid {
    border-color: #ef4444;
  }
  
  &::placeholder {
    color: #9ca3af;
  }
}

.form-field__error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #ef4444;
}

.form-field__help {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Input Variants */
.form-field__input--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}

.form-field__input--lg {
  padding: 1rem;
  font-size: 1rem;
}

/* Checkbox and Radio */
.form-field__checkbox,
.form-field__radio {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background: white;
  position: relative;
  cursor: pointer;
  
  &:checked {
    background: #3b82f6;
    border-color: #3b82f6;
  }
  
  &:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.375rem;
    height: 0.375rem;
    background: white;
    border-radius: 1px;
  }
}

.form-field__radio {
  border-radius: 50%;
  
  &:checked::after {
    border-radius: 50%;
  }
}

CSS Architecture {#css-architecture}

BEM Methodology

/* Block Element Modifier (BEM) */
/* Block */
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
}

/* Elements */
.navigation__brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3b82f6;
}

.navigation__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.navigation__item {
  /* Individual menu item */
}

.navigation__link {
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  
  &:hover {
    color: #3b82f6;
  }
}

/* Modifiers */
.navigation--dark {
  background: #1f2937;
  
  .navigation__brand {
    color: white;
  }
  
  .navigation__link {
    color: #d1d5db;
    
    &:hover {
      color: #60a5fa;
    }
  }
}

.navigation--transparent {
  background: transparent;
  backdrop-filter: blur(10px);
}

.navigation__link--active {
  color: #3b82f6;
  font-weight: 600;
}

CSS Custom Properties (Variables)

/* CSS Custom Properties for Design System */
:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-900: #1e3a8a;
  
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* Typography */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'Monaco', 'Menlo', monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #111827;
    --color-surface: #1f2937;
    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-border: #374151;
  }
}

/* Usage of custom properties */
.button {
  background: var(--color-primary-500);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-base);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-base);
  
  &:hover {
    background: var(--color-primary-600);
  }
}

Performance Optimization {#performance}

CSS Performance Best Practices

/* Efficient Selectors */
/* ❌ Inefficient: Universal selector */
* {
  box-sizing: border-box;
}

/* ✅ Better: Targeted reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ❌ Inefficient: Deep nesting */
.header .navigation .menu .item .link {
  color: blue;
}

/* ✅ Better: Flat selectors */
.nav-link {
  color: blue;
}

/* Critical CSS Inlining */
/* Above-the-fold styles that should be inlined */
.critical-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
  min-height: 60px;
}

.critical-hero {
  display: flex;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* Font Loading Optimization */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* Improves loading performance */
}

/* Preload critical fonts */
/* In HTML: <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin> */

CSS Containment

/* Layout Containment */
.card {
  contain: layout style;
  /* Isolates layout calculations */
}

.sidebar {
  contain: layout;
  /* Changes inside don't affect parent layout */
}

/* Paint Containment */
.canvas-container {
  contain: paint;
  /* Painting is contained to this element */
}

/* Size Containment */
.widget {
  contain: size;
  /* Size is independent of children */
}

/* Composite Containment */
.animation-container {
  contain: layout paint;
  /* Optimizes animations */
  will-change: transform;
}

Efficient Animations

/* GPU-Accelerated Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Efficient Hover Effects */
.card {
  transform: translateZ(0); /* Creates stacking context */
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

/* Optimized Loading Animations */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

Advanced Techniques {#advanced-techniques}

CSS Logical Properties

/* Traditional Properties */
.traditional {
  margin-top: 1rem;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  margin-left: 1.5rem;
  text-align: left;
  border-left: 2px solid #3b82f6;
}

/* Logical Properties (Writing Mode Aware) */
.logical {
  margin-block-start: 1rem;
  margin-inline-end: 1.5rem;
  margin-block-end: 1rem;
  margin-inline-start: 1.5rem;
  text-align: start;
  border-inline-start: 2px solid #3b82f6;
}

/* Shorthand Logical Properties */
.logical-shorthand {
  margin-block: 1rem;
  margin-inline: 1.5rem;
  padding-block: 0.5rem;
  padding-inline: 1rem;
}

CSS Scroll Snap

/* Scroll Snap Container */
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
  padding: 1rem;
}

.scroll-item {
  flex: 0 0 300px;
  height: 200px;
  background: #f3f4f6;
  border-radius: 0.5rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Vertical Scroll Snap */
.vertical-scroll {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

CSS Shapes and Clip Path

/* CSS Shapes */
.text-wrap {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: #3b82f6;
}

/* Complex Shapes */
.polygon-shape {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(45deg, #667eea, #764ba2);
  width: 200px;
  height: 200px;
}

/* Responsive Shapes */
.responsive-shape {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  background: #3b82f6;
  padding: 2rem;
  color: white;
}

@media (max-width: 768px) {
  .responsive-shape {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }
}

Best Practices {#best-practices}

Code Organization

/* File Structure Organization */
/*
styles/
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── utilities.css
├── components/
│   ├── buttons.css
│   ├── cards.css
│   ├── forms.css
│   └── navigation.css
├── layout/
│   ├── grid.css
│   ├── header.css
│   └── footer.css
├── pages/
│   ├── home.css
│   ├── about.css
│   └── contact.css
├── themes/
│   ├── light.css
│   └── dark.css
└── main.css
*/

/* Import Order */
@import 'base/reset.css';
@import 'base/typography.css';
@import 'base/utilities.css';

@import 'layout/grid.css';
@import 'layout/header.css';
@import 'layout/footer.css';

@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/forms.css';
@import 'components/navigation.css';

@import 'pages/home.css';
@import 'pages/about.css';
@import 'pages/contact.css';

Naming Conventions

/* Consistent Naming Patterns */

/* States */
.is-active { }
.is-hidden { }
.is-loading { }
.has-error { }

/* JavaScript Hooks */
.js-toggle { }
.js-modal-trigger { }
.js-form-submit { }

/* Utility Classes */
.u-margin-bottom-small { }
.u-text-center { }
.u-visually-hidden { }

/* Layout */
.l-container { }
.l-grid { }
.l-sidebar { }

/* Components with Variants */
.c-button { }
.c-button--primary { }
.c-button--large { }
.c-button--full-width { }

.c-card { }
.c-card--elevated { }
.c-card--horizontal { }

Accessibility Best Practices

/* Focus Management */
.focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Hide focus for mouse users, show for keyboard users */
.js-focus-visible .button:focus:not(.focus-visible) {
  outline: none;
}

/* Screen Reader Only Content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid;
  }
  
  .card {
    border: 1px solid;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Color Contrast */
.text-primary {
  color: #111827; /* Ensures 4.5:1 contrast ratio */
}

.text-secondary {
  color: #374151; /* Ensures 3:1 contrast ratio for large text */
}

Tools and Workflow {#tools-workflow}

CSS Preprocessing

// Sass/SCSS Example
$primary-color: #3b82f6;
$secondary-color: #6b7280;
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  
  @include respond-to(md) {
    padding: 1.5rem;
  }
  
  &__title {
    color: $primary-color;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  &__content {
    color: $secondary-color;
    line-height: 1.6;
  }
}

PostCSS Configuration

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-custom-properties'),
    require('postcss-nested'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

CSS-in-JS Examples

// Styled Components
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#3b82f6' : '#6b7280'};
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  
  &:hover {
    background: ${props => props.primary ? '#2563eb' : '#4b5563'};
  }
  
  ${props => props.fullWidth && `
    width: 100%;
  `}
`;

// Emotion
/** @jsx jsx */
import { jsx, css } from '@emotion/react';

const buttonStyle = css`
  background: #3b82f6;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  
  &:hover {
    background: #2563eb;
  }
`;

const Button = ({ children, ...props }) => (
  <button css={buttonStyle} {...props}>
    {children}
  </button>
);

Conclusion

Modern CSS provides powerful tools for creating responsive, maintainable, and performant user interfaces. Key takeaways:

  1. CSS Grid and Flexbox are complementary layout systems - use Grid for two-dimensional layouts and Flexbox for one-dimensional layouts
  2. Component-first architecture promotes reusability and maintainability
  3. Custom properties enable dynamic theming and consistent design systems
  4. Performance optimization should be considered from the beginning
  5. Accessibility must be built into CSS architecture
  6. Modern features like container queries and logical properties improve responsive design

By mastering these modern CSS techniques and following best practices, you can build scalable, maintainable, and accessible user interfaces that perform well across all devices and user preferences.

The future of CSS continues to evolve with new features like container queries, cascade layers, and improved color functions. Staying updated with these developments while maintaining solid fundamentals will ensure your CSS skills remain relevant and effective.