Modern CSS Techniques for 2024

CSS has evolved dramatically in recent years. Let's explore the modern techniques that are changing how we approach styling on the web.

Container Queries

Container queries allow you to style elements based on their container's size rather than the viewport.

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

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

CSS Grid and Subgrid

Grid has become the go-to layout system, and subgrid makes it even more powerful.

Custom Properties

CSS custom properties (variables) enable dynamic theming and reduce repetition.

:root {
  --primary-color: oklch(0.55 0.18 200);
  --spacing-unit: 1rem;
}

Cascade Layers

Cascade layers give you fine-grained control over specificity and the cascade.

The future of CSS is bright, with new features landing regularly that make our work easier and more powerful.