Design Frontend

Modern CSS: Features You Should Be Using Today

Marcus Chen
Marcus Chen December 06, 2025
9 min read

I learned CSS in 2015, and for years I wrote the same patterns over and over. Clearfix hacks for floats. Vendor prefixes on everything. JavaScript for what should be simple interactions. Media queries that felt like band-aids. Then I took a fresh look at modern CSS in 2024, and I realized I'd been working way too hard.

CSS has evolved dramatically. Features that seemed impossible five years ago are now standard. Techniques that required preprocessing or JavaScript are now native. If you're still writing CSS like it's 2015, you're missing out on incredible power.

Modern CSS features

CSS Custom Properties: Variables Done Right

Forget preprocessor variables. CSS custom properties (CSS variables) are fundamentally better because they're dynamic – they can change at runtime, cascade like any CSS property, work with JavaScript, and inherit through the DOM tree.

:root {
  --primary-color: #0066cc;
  --primary-hover: #0052a3;
  --spacing-unit: 8px;
  --spacing-small: calc(var(--spacing-unit) * 2);
  --spacing-medium: calc(var(--spacing-unit) * 3);
  --spacing-large: calc(var(--spacing-unit) * 5);
  --border-radius: 4px;
  --transition-speed: 200ms;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius);
  transition: background var(--transition-speed);
}

.button:hover {
  background: var(--primary-hover);
}

The Real Power of CSS Variables

The magic happens when you combine them with media queries, JavaScript, or component-specific overrides:

/* Base theme */
:root {
  --text-color: #1a1a1a;
  --bg-color: #ffffff;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --bg-color: #1a1a1a;
  }
}

/* Component override */
.card {
  --spacing-unit: 12px; /* Larger spacing just for cards */
  padding: var(--spacing-unit);
}

/* JavaScript control */
document.documentElement.style.setProperty('--primary-color', '#ff0000');

Change a few variables, and your entire site transforms. This is how modern design systems work. Components reference design tokens (variables), and updating tokens updates everything.

Responsive Typography with CSS Variables

Create a responsive type system without media queries:

:root {
  --font-size-base: clamp(16px, 2vw, 20px);
  --font-size-h1: calc(var(--font-size-base) * 2.5);
  --font-size-h2: calc(var(--font-size-base) * 2);
  --font-size-h3: calc(var(--font-size-base) * 1.5);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
p { font-size: var(--font-size-base); }

The entire type scale adjusts smoothly based on viewport size. One variable controls everything.

Container queries example

Container Queries: Responsive Components

Media queries have been our only responsive tool for years, but they have a fundamental limitation: they respond to viewport size, not component size. A sidebar component needs different styling when it's in a narrow column versus full width, regardless of screen size.

Container queries finally solve this problem, and they're a game-changer for component-based development:

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

.card {
  display: block;
  padding: 1rem;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
  
  .card-image {
    width: 200px;
    flex-shrink: 0;
  }
}

@container card (min-width: 600px) {
  .card {
    padding: 2rem;
  }
  
  .card-image {
    width: 300px;
  }
}

The card changes layout based on its container's width, not the viewport. Put it in a narrow sidebar? It stacks. Put it in main content? It displays horizontally. The same component adapts to wherever it's placed.

Why This Matters

Before container queries, making truly reusable components was hard. You'd write media queries specific to where the component lived in your layout. Move the component, and the styling breaks.

With container queries:

  • Components are truly portable
  • No need to know where a component will be used
  • Design systems become more flexible
  • Testing is easier (test the component, not its placement)
  • Layouts become more maintainable
Logical properties diagram

Logical Properties: International by Default

I never thought about right-to-left languages until I had to support Arabic on a project. Suddenly, all my margin-left, text-align: left, and padding-right declarations needed to flip. It was a nightmare of override styles and :dir() selectors.

Logical properties make internationalization automatic by using flow-relative directions instead of physical directions:

/* Old way - physical properties */
.element {
  margin-left: 20px;
  padding-right: 15px;
  text-align: left;
  border-left: 1px solid black;
}

/* New way - logical properties */
.element {
  margin-inline-start: 20px;
  padding-inline-end: 15px;
  text-align: start;
  border-inline-start: 1px solid black;
}

What these mean:

  • inline-start: Left in LTR languages, right in RTL
  • inline-end: Right in LTR, left in RTL
  • block-start: Top in horizontal writing, right in vertical
  • block-end: Bottom in horizontal, left in vertical

Complete Logical Property Reference

/* Margins */
margin-inline-start / margin-inline-end
margin-block-start / margin-block-end
margin-inline / margin-block

/* Padding */
padding-inline-start / padding-inline-end
padding-block-start / padding-block-end
padding-inline / padding-block

/* Borders */
border-inline-start / border-inline-end
border-block-start / border-block-end

/* Positioning */
inset-inline-start / inset-inline-end
inset-block-start / inset-block-end

/* Sizing */
inline-size (width in horizontal, height in vertical)
block-size (height in horizontal, width in vertical)
min-inline-size / max-inline-size
min-block-size / max-block-size

Your CSS now works correctly in any language and writing mode without modification. This should be the default way you write CSS in 2025.

Aspect Ratio: No More Padding Hacks

Remember the padding-bottom hack for maintaining aspect ratios? That ugly technique where you'd use padding-bottom: 56.25% to get a 16:9 ratio? That's finally gone:

/* Old hack */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* New way */
.video-container {
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

Works for images, videos, cards, grid items, anything. Common ratios:

.square { aspect-ratio: 1 / 1; }
.video { aspect-ratio: 16 / 9; }
.ultrawide { aspect-ratio: 21 / 9; }
.portrait { aspect-ratio: 3 / 4; }
.photo { aspect-ratio: 4 / 3; }

No wrapper divs, no percentage calculations, no positioning hacks. Just declare the ratio you want.

Subgrid: The Missing Grid Feature

CSS Grid was revolutionary, but it had a frustrating gap: child elements couldn't align with their grandparent's grid. If you had a grid of cards, and each card had internal structure, aligning card titles across all cards was impossible without hacky absolute positioning.

Subgrid fixes this elegantly:

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

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* Takes 3 rows from parent */
}

/* Now these align perfectly across all cards */
.card-header { grid-row: 1; }
.card-body { grid-row: 2; }
.card-footer { grid-row: 3; }

Card titles, images, and footers align perfectly across all cards, even though each card has different content lengths. The child grid inherits the parent's track sizes.

Real-World Subgrid Example

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

.product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  border: 1px solid #ddd;
  padding: 1rem;
}

.product-image { grid-row: 1; }
.product-title { grid-row: 2; }
.product-description { grid-row: 3; }
.product-price { grid-row: 4; }

All product images align. All titles align. Descriptions take available space. Prices align at the bottom. No JavaScript, no flex hacks, pure CSS.

Color Functions: Beyond Hex Codes

CSS can now do color math natively. Need a lighter shade? Want to adjust saturation? Don't calculate it manually or use a preprocessor:

:root {
  --primary: oklch(60% 0.15 250);
}

/* Create variations */
.button-primary {
  background: var(--primary);
}

.button-hover {
  background: oklch(from var(--primary) calc(l + 10%) c h);
}

.button-active {
  background: oklch(from var(--primary) calc(l - 10%) c h);
}

.button-disabled {
  background: oklch(from var(--primary) l calc(c / 2) h);
}

Why OKLCH?

OKLCH is a perceptually uniform color space. Unlike HSL where changing lightness by 10% produces different visual changes depending on the hue, OKLCH is consistent:

  • L (lightness): 0% to 100%, perceptually uniform
  • C (chroma): 0 (gray) to 0.4 (vivid), how colorful
  • H (hue): 0 to 360, the color wheel

Generate entire color palettes from one base color:

:root {
  --base: oklch(60% 0.15 250);
  --lighter: oklch(from var(--base) calc(l + 20%) c h);
  --darker: oklch(from var(--base) calc(l - 20%) c h);
  --muted: oklch(from var(--base) l calc(c / 3) h);
  --vivid: oklch(from var(--base) l calc(c * 1.5) h);
}

Has Selector: Parent Selection Finally

For decades, we wanted to style a parent based on its children. "Select the form if it contains an invalid input." "Style the card differently if it has a featured badge." JavaScript was the only option. Not anymore:

/* Style form if it contains invalid input */
.form:has(:invalid) {
  border-color: red;
}

.form:has(:invalid) .submit-button {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Style card with featured badge differently */
.card:has(.featured-badge) {
  border: 2px solid gold;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Style parent based on empty state */
.list:has(:empty) {
  display: none;
}

.empty-state:has(+ .list:empty) {
  display: block;
}

/* Style article if it has images */
.article:has(img) {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

Complex Selectors

Combine :has() with other selectors for powerful targeting:

/* Checkbox hack without JavaScript */
.settings:has(#dark-mode:checked) {
  background: #1a1a1a;
  color: #ffffff;
}

/* Adjacent sibling awareness */
.section:has(+ .section.highlighted) {
  border-bottom: none;
}

/* Nested conditions */
.card:has(.image:hover) .card-overlay {
  opacity: 1;
}

Scroll-Driven Animations: Interactions Without JavaScript

Parallax effects, progress bars that fill as you scroll, elements that fade in on scroll – these all used to require JavaScript scroll listeners. Now they're pure CSS:

/* Fade in elements as they enter viewport */
@keyframes fade-in {
  from { 
    opacity: 0;
    transform: translateY(50px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

Reading Progress Indicator

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #0066cc, #00ccff);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(root);
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

Parallax Effect

.parallax {
  animation: parallax linear;
  animation-timeline: scroll();
}

@keyframes parallax {
  to { transform: translateY(-100px); }
}

The browser handles everything – no scroll event listeners, no performance concerns, no JavaScript at all. Animations are buttery smooth because they run on the compositor thread.

Browser Support and Progressive Enhancement

Modern CSS features have excellent support in browsers that matter. As of 2025:

  • CSS Variables: 98% (use everywhere)
  • Container Queries: 90% (use with fallback)
  • Logical Properties: 95% (use everywhere)
  • aspect-ratio: 95% (use everywhere)
  • Subgrid: 85% (use with fallback)
  • :has(): 85% (use with fallback)
  • OKLCH colors: 75% (use with fallback)
  • Scroll animations: 70% (progressive enhancement)

Progressive Enhancement Strategy

/* Base styles that work everywhere */
.card {
  display: block;
  padding: 1rem;
}

/* Enhanced styles for capable browsers */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .card {
      display: flex;
      gap: 2rem;
    }
  }
}

/* Feature detection for :has() */
@supports selector(:has(*)) {
  .form:has(:invalid) {
    border-color: red;
  }
}

Should You Use These Today?

Absolutely yes, with smart fallbacks. Modern CSS features aren't experimental – they're production-ready tools that make your code cleaner, more maintainable, and more powerful.

My approach:

  1. Use everywhere: CSS variables, logical properties, aspect-ratio
  2. Use with fallbacks: Container queries, :has(), subgrid
  3. Progressive enhancement: Scroll animations, advanced color functions
  4. Know your audience: Check analytics, make informed decisions

Setting Your Baseline

If your users are on modern browsers (2022+), use everything. If you need to support older browsers, layer features:

  • Base styles work everywhere
  • Enhanced styles use @supports
  • Cutting-edge features as progressive enhancement

The Bottom Line

The web platform has evolved significantly. CSS in 2025 is dramatically more powerful than CSS in 2015. Container queries, logical properties, subgrid, color functions, :has(), scroll animations – these aren't experimental features or nice-to-haves. They're production-ready tools that solve real problems.

Stop writing CSS like it's 2015. Stop using JavaScript for what CSS can do natively. Stop using preprocessors for features CSS now has built-in. Learn modern CSS, embrace its power, and write code that's cleaner, more maintainable, and more performant.

The tools are here. Use them.

Related Articles