Modern CSS Techniques Every Developer Should Know

CSS has evolved tremendously over the past few years, introducing powerful features that make complex layouts and designs achievable with minimal code. Let's explore some modern CSS techniques that every developer should have in their toolkit.

Container Queries

Container queries represent one of the most significant additions to CSS in recent years. Unlike media queries that respond to viewport size, container queries respond to the size of a parent container.

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

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

This enables truly reusable, responsive components that adapt based on where they're placed, not just the screen size.

CSS Grid Subgrid

Subgrid allows nested grids to participate in the parent grid's track sizing, solving alignment issues that previously required JavaScript or complex workarounds.

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

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

The :has() Selector

Often called the "parent selector," :has() enables styling based on what an element contains:

/* Style cards that have images */
.card:has(img) {
  padding-top: 0;
}

/* Style forms with invalid inputs */
form:has(:invalid) {
  border-color: red;
}

Logical Properties

Logical properties make internationalization easier by using relative directions instead of physical ones:

.element {
  /* Instead of margin-left and margin-right */
  margin-inline: 1rem;

  /* Instead of padding-top and padding-bottom */
  padding-block: 2rem;
}

CSS Nesting

Native CSS nesting reduces repetition and improves readability:

.card {
  padding: 1rem;

  & h2 {
    font-size: 1.5rem;
  }

  &:hover {
    background: #f5f5f5;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

Conclusion

These modern CSS features significantly improve developer experience and make building complex, responsive designs more straightforward. As browser support continues to improve, incorporating these techniques into your projects will help you write cleaner, more maintainable stylesheets.

What CSS features are you most excited about? Share your thoughts with us on social media!