Native CSS Nesting: Write Sass-Style CSS Without a Preprocessor

Nesting was one of the main reasons people used Sass. It's now part of CSS itself and works in every modern browser.

The basics

.card {
  padding: 1rem;
  border-radius: 12px;

  h2 {
    font-size: 1.25rem;          /* .card h2 */
  }

  &:hover {
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.1);   /* .card:hover */
  }

  &.featured {
    border: 2px solid gold;      /* .card.featured */
  }

  .dark & {
    background: #1e293b;          /* .dark .card */
  }
}

Nested media and container queries

.sidebar {
  display: none;

  @media (min-width: 900px) {
    display: block;
  }
}

Keeping the responsive rules next to the base rules makes components much easier to read.

Differences from Sass

• No string concatenation: &__title (BEM-style suffixes) works in Sass but not in native CSS.
• Nested selectors behave like :is(), which can affect specificity in edge cases.
• No variables, mixins or loops; use custom properties instead of Sass variables.

Keep it shallow

Deep nesting creates long, specific selectors that are hard to override. A good rule: no more than two or three levels, and nest states (:hover, .is-active) and media queries rather than deep DOM paths.