Modern CSS Techniques Every Web Developer Should Know in 2023

Introduction

CSS has evolved dramatically in recent years, transforming from a simple styling language into a powerful system for creating dynamic, responsive layouts and sophisticated visual effects. As someone who’s been building websites for years, I’ve witnessed this evolution firsthand and continue to be amazed by what’s possible with modern CSS. In this article, I’ll share some of the most exciting CSS techniques that have become practical to use in production in 2023.

Container Queries: Responsive Design Reimagined

For years, media queries have been our primary tool for responsive design, allowing us to adapt layouts based on viewport dimensions. However, they fall short when components need to respond to their container’s size rather than the viewport.

Enter container queries, which finally solve this long-standing limitation:

/* Define a container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Style based on container width */
@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }

  .card-image {
    width: 40%;
  }

  .card-content {
    width: 60%;
  }
}

With container queries, we can create truly reusable components that adapt to their context, regardless of where they’re placed in the layout. This is a game-changer for component-based design systems.

Cascade Layers: Managing Specificity

CSS specificity has always been a challenge in large projects. The new cascade layers feature provides a way to organize and prioritize your styles, making specificity conflicts much easier to manage:

@layer reset, base, components, utilities;

@layer reset {
  /* Reset styles here */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  /* Base styles here */
  body {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  /* Component styles here */
  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background-color: var(--primary-color);
    color: white;
  }
}

@layer utilities {
  /* Utility styles here */
  .mt-4 {
    margin-top: 1rem;
  }
}

With cascade layers, styles in later layers take precedence over earlier ones, regardless of specificity. This gives you explicit control over the cascade, making your CSS more predictable and maintainable.

Custom Properties: Beyond Simple Variables

CSS custom properties (variables) have been around for a while, but their potential goes far beyond simple color or size definitions. Here are some advanced techniques:

Theming with Custom Properties

:root {
  --primary-h: 220;
  --primary-s: 90%;
  --primary-l: 50%;

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 30%);
}

[data-theme="green"] {
  --primary-h: 150;
}

Component Variants with Custom Properties

.button {
  --button-bg: var(--primary);
  --button-color: white;
  --button-padding: 0.5rem 1rem;

  background-color: var(--button-bg);
  color: var(--button-color);
  padding: var(--button-padding);
}

.button.button-large {
  --button-padding: 0.75rem 1.5rem;
}

.button.button-secondary {
  --button-bg: transparent;
  --button-color: var(--primary);
}

This approach creates a clean API for component variants and makes your CSS more maintainable.

The Power of Modern Layout Techniques

CSS Grid for Two-Dimensional Layouts

CSS Grid has matured into a reliable, powerful layout system. Here’s a responsive grid that adapts to available space without media queries:

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

This creates a responsive grid where items are at least 250px wide, and the number of columns adjusts automatically based on available space.

Subgrid for Nested Grids

The newer subgrid feature allows nested grids to participate in the parent grid’s layout:

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

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

This is particularly useful for maintaining alignment across complex nested components.

Scroll-Driven Animations

One of the newest additions to CSS is the ability to create scroll-driven animations without JavaScript:

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reveal {
  animation: fade-in linear;
  animation-timeline: scroll();
  animation-range: entry 10% cover 30%;
}

This creates an animation that’s driven by the element’s position in the viewport as the user scrolls, with no JavaScript required.

Logical Properties for International Layouts

If you’re building sites that support multiple languages, including right-to-left scripts, logical properties make your life much easier:

.card {
  margin-block: 1rem;
  margin-inline: 1.5rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--primary);
}

Instead of using directional properties like margin-left or padding-right, logical properties adapt automatically to the text direction.

Modern Selectors for Cleaner Markup

New CSS selectors can help you write more maintainable code with less markup:

:has() - The “Parent Selector”

/* Style a card differently when it contains an image */
.card:has(img) {
  padding-block-start: 0;
}

/* Style form fields that are required and invalid */
input:is([required]):is(:invalid) {
  border-color: red;
}

:where() and :is() for Grouping Selectors

/* Lower specificity with :where() */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Montserrat', sans-serif;
}

/* Maintain specificity with :is() */
:is(section, article, aside) h2 {
  font-size: 1.5rem;
}

Conclusion

Modern CSS has evolved into a powerful, flexible system that can handle complex layouts and interactions that previously required JavaScript. By embracing these newer features, you can write more maintainable code, create more robust designs, and deliver better user experiences.

The best part is that browser support for these features has improved dramatically. With the right progressive enhancement approach, you can start using most of these techniques in production today.