Modern CSS Techniques Every Developer Should Know

CSS has evolved dramatically. Modern features make previously complex layouts trivial.

CSS Grid: Layout Revolution

Grid makes complex layouts simple:

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Grid Features

• fr units: Flexible fractions
• auto-fit/auto-fill: Responsive without media queries
• grid-template-areas: Visual layout definition

Container Queries

Style based on container size, not viewport:

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

CSS Custom Properties

Variables that cascade and can be manipulated:

:root {
  --primary: hsl(220 90% 56%);
  --spacing: clamp(1rem, 3vw, 2rem);
}

Modern Selectors

:has() - The Parent Selector

.card:has(img) { padding: 0; }

:is() and :where()

:is(h1, h2, h3):hover { color: var(--primary); }

Scroll-Driven Animations

Animate based on scroll position:

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: reveal linear;
  animation-timeline: view();
}

Logical Properties

Write direction-agnostic CSS:

• margin-inline instead of margin-left/right
• padding-block instead of padding-top/bottom

Color Spaces

Modern color functions:

• oklch() - Perceptually uniform
• color-mix() - Blend colors easily

Tips for Adoption

1. Use feature detection with @supports
2. Provide fallbacks for older browsers
3. Progressive enhancement approach

Conclusion

Modern CSS is powerful. Embrace these features to write cleaner, more maintainable styles.