WA
Home
Story
Experience
Framework
Insights
Testimonials
Mentorship

© 2025 Wesam Abousaid. All rights reserved.

Made with using Next.js & Tailwind CSS

Modern CSS Techniques You Should Be Using

Modern CSS Techniques You Should Be Using

June 14, 2025
2 min read
Wesam Abousaid
English
cssfrontendweb-designstylingui

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!


Back to Blog