Modern CSS Techniques I Wish I Knew Sooner

CSS in 2026 looks nothing like the CSS I learned years ago. The language has matured into a powerful, expressive styling system. Here are techniques that fundamentally changed how I approach front-end design.

CSS Custom Properties (Variables)

If you're still using preprocessor variables for colors and spacing, it's time to switch. CSS custom properties cascade, can be scoped to components, and can be manipulated with JavaScript at runtime.

:root {
  --color-primary: #6366f1;
  --spacing-md: 1rem;
}

.card {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

The :has() Selector

Sometimes called the "parent selector," :has() lets you style elements based on their children or subsequent siblings. This was impossible with CSS alone for decades.

/* Style a card differently if it contains an image */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

Container Queries

Media queries respond to viewport size. Container queries respond to component size. This is the missing piece for truly reusable components.

Logical Properties

Properties like margin-inline, padding-block, and inset make your layouts automatically work in right-to-left languages. Start using them now — your future self (and your users) will thank you.

Nesting

Native CSS nesting is here. No more Sass just for nesting. Write cleaner, more organized stylesheets without a build step.

The best time to modernize your CSS was yesterday. The second best time is now.