Modern CSS Techniques You Should Be Using

Modern CSS Techniques

CSS has evolved dramatically. Here are modern techniques that can simplify your code and improve performance.

1. Container Queries

Style based on container size, not viewport:

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

2. CSS Grid Mastery

Create complex layouts easily:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Spanning items */
.featured {
  grid-column: span 2;
  grid-row: span 2;
}

3. Custom Properties (CSS Variables)

Dynamic, themeable designs:

:root {
  --primary: #007bff;
  --spacing: 1rem;
  --radius: 8px;
}

.dark-theme {
  --primary: #4a90e2;
  --bg: #1a1a1a;
  --text: #ffffff;
}

.button {
  background: var(--primary);
  padding: var(--spacing);
  border-radius: var(--radius);
}

4. Logical Properties

Support all writing modes:

/* Old way */
.card {
  margin-left: 20px;
  padding-right: 10px;
}

/* Modern way */
.card {
  margin-inline-start: 20px;
  padding-inline-end: 10px;
}

5. Aspect Ratio

Maintain proportions without JavaScript:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.square {
  aspect-ratio: 1;
}

6. Clamp() for Fluid Typography

Responsive text without media queries:

.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: clamp(1.2, 1.5vw, 1.5);
}

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

7. :has() Selector

Parent selector we've always wanted:

/* Style form if it has an invalid input */
form:has(input:invalid) {
  border: 2px solid red;
}

/* Style nav if dropdown is open */
nav:has(.dropdown.open) {
  background: rgba(0, 0, 0, 0.9);
}

8. Scroll Snap

Smooth scrolling experiences:

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
}

.slide {
  scroll-snap-align: center;
  flex: 0 0 100%;
}

9. CSS Nesting

Write cleaner, more maintainable styles:

.card {
  background: white;
  padding: 1rem;
  
  & .title {
    font-size: 1.5rem;
    
    &:hover {
      color: var(--primary);
    }
  }
  
  & + & {
    margin-top: 1rem;
  }
}

Conclusion

Modern CSS is incredibly powerful. These techniques can replace many JavaScript solutions, improve performance, and make your code more maintainable. Start incorporating them into your projects today!