Modern CSS Techniques You Should Be Using in 2024

# Modern CSS Techniques

CSS has evolved dramatically. Many problems that once required JavaScript can now be solved with pure CSS. Let's explore the most impactful new features.

Container Queries

Finally, responsive components based on their container size instead of viewport:

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

The :has() Selector

The "parent selector" we've always wanted. Style elements based on their children:

.card:has(img) { grid-template-rows: auto 1fr; }

Subgrid

Perfect alignment in nested grids. Children can participate in the parent's grid tracks.

Key Takeaways

- Container queries enable truly responsive components - :has() eliminates the need for many JS-based styling solutions - Subgrid solves nested alignment problems elegantly