Modern CSS Features: A Complete Guide to CSS in 2026

CSS has undergone a renaissance. In 2026, it's no longer just a styling language—it's a serious engineering tool with features that rival what preprocessors offered for over a decade. Container queries, cascade layers, native nesting, :has() selector, and modern color functions have fundamentally changed how we build maintainable, scalable design systems.

This comprehensive guide covers the modern CSS landscape based on 2026 production patterns, with practical examples and adoption insights from real-world teams.

The CSS Evolution: What Changed?

Before (2015-2020)

/* Media queries only knew viewport */
@media (min-width: 768px) {
  .card { width: 50%; }
}

/* Specificity wars */
.card.card.card { color: red; } /* Hack to increase specificity */

/* No nesting */
.card { }
.card__header { }
.card__title { }

After (2026)

/* Container queries know parent size */
@container (min-width: 400px) {
  .card { width: 50%; }
}

/* Cascade layers manage priority */
@layer components {
  .card { color: blue; }
}

/* Native nesting */
.card {
  & .card__header {
    & .card__title { }
  }
}

Container Queries: The Game Changer

Container queries solve the fundamental problem with media queries: they only know about viewport size, not the container a component lives in.

The Problem with Media Queries

<!-- Same card component in two contexts -->
<aside>
  <card /> <!-- 300px wide (sidebar) -->
</aside>

<main>
  <card /> <!-- 800px wide (main content) -->
</main>

With media queries:

/* Both cards get same styles based on viewport */
@media (min-width: 768px) {
  .card { display: grid; grid-template-columns: 1fr 1fr; }
}
/* Breaks when card is in narrow sidebar on wide viewport! */

The Solution: Container Queries

/* Define container */
.sidebar,
.main-content {
  container-type: inline-size;
  container-name: card-container;
}

/* Query container, not viewport */
.card {
  /* Mobile-first: single column */
  display: grid;
  grid-template-columns: 1fr;
}

@container card-container (min-width: 400px) {
  .card {
    /* Two columns when container is wide enough */
    grid-template-columns: 1fr 1fr;
  }
}

Result: Card adapts to its container, not viewport. Truly modular components.

Container Query Units

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

.card {
  /* Container query units */
  padding: 2cqw;        /* 2% of container width */
  font-size: 4cqi;      /* 4% of container inline size */
  gap: 1cqh;            /* 1% of container height */
  margin: 2cqmin;       /* 2% of container's smaller dimension */
}

Real-World Example: Responsive Card Grid

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

.card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
}

/* Compact layout (narrow containers) */
@container (max-width: 350px) {
  .card {
    & .card__image { display: none; }
    & .card__title { font-size: 1rem; }
    & .card__description { display: none; }
  }
}

/* Medium layout */
@container (min-width: 351px) and (max-width: 600px) {
  .card {
    & .card__image { height: 150px; }
    & .card__title { font-size: 1.25rem; }
  }
}

/* Expanded layout (wide containers) */
@container (min-width: 601px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;

    & .card__image { height: 100%; }
    & .card__title { font-size: 1.5rem; }
  }
}

Browser Support (2026)

Adoption: 78% of production websites use container queries in 2026.

Cascade Layers: Taming Specificity

Cascade layers (@layer) let you explicitly define priority order for different CSS sources, independent of specificity.

The Problem: Specificity Wars

/* Base styles */
.button { background: blue; }

/* Component library */
.btn-primary { background: green; }

/* Your overrides */
.button.button.button { background: red; } /* Hack! */

/* Eventually... */
.button { background: orange !important; } /* Defeat */

The Solution: Cascade Layers

/* Define layer order (later = higher priority) */
@layer reset, base, components, utilities;

/* Reset layer (lowest priority) */
@layer reset {
  * { margin: 0; padding: 0; }
}

/* Base layer */
@layer base {
  button { background: blue; }
}

/* Component layer */
@layer components {
  .btn-primary { background: green; }
}

/* Utility layer (highest priority) */
@layer utilities {
  .bg-red { background: red; } /* Wins, even with lower specificity */
}

Key insight: Layer order trumps specificity. A simple class in a higher layer beats complex selectors in lower layers.

Real-World Example: Design System

@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body { margin: 0; }
}

@layer tokens {
  :root {
    --color-primary: oklch(60% 0.15 250);
    --spacing-md: 1rem;
  }
}

@layer base {
  h1 { font-size: 2rem; }
  a { color: var(--color-primary); }
}

@layer components {
  .card {
    padding: var(--spacing-md);
    background: white;
    border-radius: 8px;
  }

  .button {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border: none;
  }
}

@layer utilities {
  .hidden { display: none; } /* Utility wins over component styles */
  .p-0 { padding: 0; }
}

Nested Layers

@layer framework {
  @layer reset, base, components;

  @layer reset {
    /* Framework reset */
  }

  @layer components {
    /* Framework components */
  }
}

/* Your app styles (higher priority than entire framework) */
@layer app {
  .custom-button { /* Overrides framework */ }
}

Native CSS Nesting

CSS nesting is now native—no Sass required.

Syntax (2026)

/* Modern nesting syntax */
.card {
  padding: 1rem;
  background: white;

  & h2 {
    font-size: 1.5rem;
    color: navy;
  }

  & p {
    color: gray;
  }

  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  & .card__header {
    border-bottom: 1px solid #eee;
  }

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

Comparison: Sass vs Native CSS

Migration path: Many teams are dropping Sass for vanilla CSS + PostCSS in 2026.

The :has() Parent Selector

The :has() selector enables parent styling based on children—previously impossible without JavaScript.

Examples

Style parent based on child existence:

/* Highlight card if it contains an image */
.card:has(img) {
  border: 2px solid gold;
}

/* Style form if it has errors */
form:has(.error) {
  border-color: red;
}

/* Grid layout only if enough items */
.container:has(.item:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

Sibling selectors:

/* Style heading if followed by paragraph */
h2:has(+ p) {
  margin-bottom: 0.5rem;
}

/* Style list item if it contains a checked checkbox */
li:has(input[type="checkbox"]:checked) {
  text-decoration: line-through;
  opacity: 0.6;
}

Complex patterns:

/* Article with featured image gets special layout */
article:has(.featured-image) {
  display: grid;
  grid-template-columns: 1fr 2fr;

  .featured-image {
    grid-row: 1 / -1;
  }
}

/* Navigation with active item gets different styling */
nav:has(.active) {
  background: var(--color-primary);
  color: white;
}

Browser Support (2026)

Adoption: Universal support achieved 2023-2024; widespread production use by 2026.

Modern Color Functions

CSS color has evolved beyond hex codes and rgb().

oklch() - Perceptually Uniform Colors

Why oklch(): Better than HSL—perceptually uniform (equal lightness steps look equally different to humans).

:root {
  /* oklch(lightness chroma hue) */
  --color-primary: oklch(60% 0.15 250);      /* Blue */
  --color-primary-light: oklch(80% 0.15 250); /* Lighter (same hue) */
  --color-primary-dark: oklch(40% 0.15 250);  /* Darker (same hue) */
}

/* Generate palette */
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }

color-mix() - Blend Colors

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

/* Mix with white for tints */
.light-variant {
  background: color-mix(in oklch, var(--color-base) 20%, white);
}

/* Mix with black for shades */
.dark-variant {
  background: color-mix(in oklch, var(--color-base) 80%, black);
}

/* Mix two theme colors */
.accent {
  color: color-mix(in oklch, var(--color-primary), var(--color-secondary));
}

Relative Colors

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

/* Derive variations */
.lighter {
  /* Increase lightness by 20% */
  background: oklch(from var(--color-primary) calc(l + 0.2) c h);
}

.saturated {
  /* Increase chroma */
  background: oklch(from var(--color-primary) l calc(c + 0.05) h);
}

.rotated {
  /* Rotate hue */
  background: oklch(from var(--color-primary) l c calc(h + 60));
}

Enhanced Custom Properties

Registered Custom Properties (@property)

Define custom properties with types and fallbacks:

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

@property --color-primary {
  syntax: '<color>';
  initial-value: blue;
  inherits: true;
}

/* Now animatable! */
.box {
  transform: rotate(var(--rotation));
  transition: --rotation 0.3s;
}

.box:hover {
  --rotation: 45deg; /* Smooth animation */
}

Container Query Length Units with Custom Properties

.card {
  container-type: inline-size;

  --padding-scale: 2; /* Configurable */
  padding: calc(var(--padding-scale) * 1cqw);
}

Logical Properties: International-Ready CSS

Logical properties adapt to writing direction (LTR, RTL, vertical).

/* Old way (assumes LTR) */
.box {
  margin-left: 1rem;
  padding-right: 2rem;
  border-top: 1px solid;
}

/* Modern way (writing-mode aware) */
.box {
  margin-inline-start: 1rem;   /* Left in LTR, right in RTL */
  padding-inline-end: 2rem;     /* Right in LTR, left in RTL */
  border-block-start: 1px solid; /* Top in horizontal, left in vertical */
}

Mapping:

Subgrid: True Grid Alignment

Subgrid lets nested grids align with parent grid tracks.

.page-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.card {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid; /* Inherit parent's 4 columns */

  & .card__image { grid-column: span 2; }
  & .card__content { grid-column: span 2; }
}

Real-World Design System (2026)

Combining modern features:

@layer reset, tokens, base, components, utilities;

@layer tokens {
  @property --color-primary {
    syntax: '<color>';
    initial-value: oklch(60% 0.15 250);
    inherits: true;
  }

  :root {
    --spacing-unit: 0.25rem;
    --font-base: system-ui, sans-serif;
  }
}

@layer base {
  * { box-sizing: border-box; }

  body {
    font-family: var(--font-base);
    margin: 0;
  }
}

@layer components {
  .card {
    container-type: inline-size;
    background: white;
    border-radius: 8px;
    padding: calc(var(--spacing-unit) * 4);

    &:has(.featured) {
      border: 2px solid var(--color-primary);
    }

    @container (min-width: 400px) {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: calc(var(--spacing-unit) * 6);
    }

    & .card__title {
      color: oklch(from var(--color-primary) calc(l - 0.2) c h);
      font-size: clamp(1rem, 3cqi, 2rem);
    }
  }
}

@layer utilities {
  .hidden { display: none; }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

Performance Considerations

Best practices:

• Avoid deeply nested :has() queries (e.g., :has(.a :has(.b :has(.c))))
• Define @property in CSS, not JavaScript
• Use container-type: inline-size (not size) when possible (better performance)

Browser Support Summary (2026)

Check support for each feature and exact syntax against the browser versions your product supports; the table above is a reference, not a guarantee for every device.

Migrating from Sass/Less

What you lose:

• Mixins (use CSS custom properties + utility classes)
• Loops (move to PostCSS or design tokens)
• Conditionals (not needed with layers + custom properties)

What you gain:

• No build step (faster dev)
• Browser DevTools work perfectly
• Smaller bundles (no runtime overhead)
• Modern features (container queries, :has())

Recommended stack (2026):

• Native CSS for styling
• PostCSS for vendor prefixes, minification
• Lightning CSS for fast processing
• Design tokens (JSON) for theming

Which modern CSS feature should you adopt first?

Start with a layout problem you can reproduce. If a card works across a wide page but breaks in a narrow sidebar, a container query is a useful candidate. If a shared component keeps losing to unrelated global selectors, examine the cascade before adding another class. A feature earns its place when it makes an existing behavior easier to explain.

For a reusable card, put containment on a wrapper and let the card respond to that wrapper's inline size. A size query does not let an element determine its own size from the very result of the query. Keeping the queried container and the adapted content distinct makes the layout relationship clearer and avoids surprising examples that appear to query the component itself.

Build a readable baseline before adding the query. Stack the image and text, allow long headings to wrap, and use normal document flow. The wider layout can then improve the presentation when space permits. If the enhanced rule is ignored, the baseline should still show the content and its main action.

Why does Sass-style BEM nesting fail in native CSS?

Native CSS nesting does not concatenate the parent selector with a suffix. Writing a parent ampersand followed immediately by a BEM suffix is a Sass convention, not a portable native CSS selector. MDN's nesting guide explicitly distinguishes these behaviors.

If the markup uses a card element class, write that class as a descendant selector inside the card rule, or write it as a separate top-level rule. The descendant form describes an actual relationship in the document. A top-level element class can be appropriate when you intentionally want it to work independently of a particular wrapper.

This distinction matters when asking an agent to remove a preprocessor. A mechanical replacement of the file extension leaves selector semantics unchecked. Inspect the generated CSS and a representative page before concluding the migration worked. A clean build can coexist with rules the browser silently ignores.

How do cascade layers change a debugging session?

Layers establish an ordering before ordinary specificity resolves declarations within the applicable layer. Unlayered normal author rules can outrank normal declarations inside a layer. That means a legacy stylesheet can still defeat a carefully named utilities layer if you never assigned the legacy rules to a layer.

Document the layer order in one place and inspect which layer a winning declaration belongs to. When integrating a library, decide whether its styles belong in a vendor layer or stay outside your system. Do not assume that putting your component in a layer automatically gives it priority over every unlayered rule.

Important declarations have different layer-order behavior, so sprinkling importance across the system can undermine the simple mental model. Follow the layer specification guidance and use browser developer tools to inspect the actual winning declaration. Remove unnecessary importance as part of a scoped cleanup rather than changing the whole cascade at once.

How should you test a CSS migration?

Choose a small set of representative components: a dense navigation bar, a card with an unusually long heading, and a form showing an error. Render each at narrow and wide widths. Also inspect a zoomed view, because a design that fits only at default text size can hide content for readers who enlarge the page.

Check keyboard focus and contrast after changing colors. A visually attractive color blend is not evidence that text meets the contrast requirement for its size. Test the specific foreground and background combination you ship, including hover, selected, disabled, and error states. Keep an explicit focus style where a reset might remove the browser default.

If the site supports languages with a different writing direction, logical spacing properties reduce assumptions about left and right. Still inspect the result: an icon that implies forward motion may need a directional decision beyond changing padding. CSS can express layout relationships, but it cannot infer the meaning of every visual asset.

For browser compatibility, check the individual feature and syntax against your audience's supported versions. A broad statement that every modern feature works everywhere is too coarse. Embedded webviews, managed devices, and older operating systems may matter to your product even when desktop evergreen browsers support the basic feature.

What is a useful practice project?

Create a product card that appears in both a three-column listing and a narrow sidebar. Share the same markup. Use a wrapper query to change the internal arrangement, a small token set for spacing and colors, and one documented layer order. Then add a deliberately long title and an unavailable-product state.

Explain which rule produces each visible behavior before asking an agent to refactor it. The HTML basics guide helps with the markup, while DESIGN.md can capture the intended states. This exercise teaches maintainability through a concrete component instead of a catalog of new syntax.

Conclusion

CSS in 2026 is a serious engineering tool. With container queries, cascade layers, :has(), and modern color functions, you can build maintainable, scalable design systems without preprocessors.

Key takeaways:

• Container queries enable truly modular responsive components
• Cascade layers eliminate specificity wars
• :has() unlocks parent styling without JavaScript
• oklch() and color-mix() provide sophisticated color systems
• Native nesting removes need for Sass in many projects

Adopt features incrementally, with a readable baseline and compatibility checks for your supported browsers.

For AI-powered CSS generation, explore the MCP ecosystem and agent skills for design system automation.

Resources

• MDN CSS Container Queries — comprehensive docs
• CSS Cascade Layers — official guide
• :has() Selector — parent selector docs
• oklch() Color Function — modern colors
• Can I Use — browser support tables

Further reading:

• Figma: Web Development Trends 2026
• Feature-Sliced Design: Frontend Trends 2026

Happy styling!