Modern CSS Techniques You Should Know

CSS has evolved dramatically in recent years. Let’s explore some modern techniques that will make your styling workflow more efficient and powerful.

CSS Grid and Flexbox

Combine Grid and Flexbox for powerful layouts:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
 
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

CSS Custom Properties

Custom properties (CSS variables) make theming easy:

:root {
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --spacing-unit: 0.5rem;
}
 
.button {
  background: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

Container Queries

Container queries let you style components based on their container size:

.card-container {
  container-type: inline-size;
}
 
@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Modern Selectors

Use :has() and :is() for powerful selections:

.card:has(img) {
  padding: 0;
}
 
:is(h1, h2, h3):hover {
  color: var(--primary-color);
}

Conclusion

These modern CSS techniques help you write cleaner, more maintainable styles. Start incorporating them into your projects today!