Modern CSS Techniques Every Developer Should Know

CSS has evolved tremendously in recent years, introducing powerful features that make styling more efficient and maintainable. Let's explore the most impactful modern CSS techniques.

1. CSS Grid Layout

CSS Grid revolutionizes how we create layouts:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

2. CSS Custom Properties (Variables)

Create dynamic, reusable values:

:root {
  --primary-color: #6366f1;
  --spacing-unit: 1rem;
}

.component {
  background: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

3. Container Queries

Style components based on their container size:

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

4. Modern Selectors

Use powerful new selectors for better targeting:

/* :has() selector */
.card:has(img) {
  border: 2px solid var(--accent-color);
}

/* :where() and :is() for specificity control */
:where(h1, h2, h3) {
  margin-block: 1em;
}

These techniques will modernize your CSS workflow and create more maintainable stylesheets.