Modern CSS Techniques You Should Know in 2024

CSS has evolved significantly. Let's explore modern techniques that make styling easier and more powerful.

Container Queries

Container queries allow components to respond to their container's size, not just the viewport:

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

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

CSS Grid and Subgrid

Modern grid layouts with subgrid support:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

Cascade Layers

Organize your CSS with explicit layer ordering:

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer components {
  .button { /* component styles */ }
}

Custom Properties with @property

Define custom properties with type checking:

@property --rotation {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.element {
  --rotation: 45deg;
  transform: rotate(var(--rotation));
}

Modern Color Functions

Use new color spaces and functions:

.element {
  /* Relative colors */
  background: oklch(from blue calc(l * 0.8) c h);
  
  /* Color mixing */
  color: color-mix(in oklch, blue 70%, white);
}

Conclusion

Modern CSS provides powerful tools for creating responsive, maintainable stylesheets. Start incorporating these techniques to improve your styling workflow.