1. Home
2. web
3. Standard Syntax of CSS Nesting without Preprocessors

Introduction

Historically, writing nested CSS rules required preprocessing tools like Sass (SCSS), Less, or PostCSS.

However, browser vendors have standardized the CSS Nesting specification. Today, you can write nested selectors directly in plain CSS files and run them natively in all modern web browsers.

This article reviews the standard syntax of native CSS nesting and explains how its behavior differs from Sass compilations.

1. The Basics of Native CSS Nesting

Standard CSS Nesting looks very similar to the nested structures used in Sass.

Basic Example

.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;

  /* Nest child elements directly */
  .card-title {
    font-size: 1.5rem;
    color: #333;
  }

  /* Use the & character to target pseudo-classes like hover */
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

Earlier drafts of the specification required placing an & prefix before all nested selectors. The finalized standard removes this requirement, allowing you to nest class names (.card-title) and HTML elements (h3) directly without the & symbol.

2. Key Differences from Sass: Avoid String Concatenation

If you are coming from Sass, the most important rule to remember is that native CSS nesting does not support suffix-based class name concatenation (e.g., BEM syntax).

The Sass Way (Unsupported in Native CSS)

/* This compiles in Sass, but fails in native CSS */
.button {
  display: inline-block;
  
  &--large { /* Sass compiles this to: .button--large */
    padding: 15px 30px;
  }
}

Native CSS Behavior

In native CSS, the & symbol represents the complete parent selector as an element object, rather than a raw text string. Because of this, suffix concatenations like &--large are invalid.

The Correct Way in Native CSS

To combine selectors natively, you must declare the class name in full:

.button {
  display: inline-block;

  &.button--large { /* Correctly targets: .button.button--large */
    padding: 15px 30px;
  }
}

3. Positioning the Ampersand (&) in Parent Selectors

You can position the & symbol at the end or in the middle of a nested selector. This is useful when you want to apply styles to an element only when it is inside a specific parent container.

Example

.theme-text {
  color: #333; /* Default text color */

  /* Apply styles only when nested under a .dark-mode container */
  .dark-mode & {
    color: #fff; /* Dark mode color */
  }
}

This compiles to the equivalent of .dark-mode .theme-text { color: #fff; }, keeping the theme styles encapsulated within the .theme-text block.

Conclusion: When to Migrate from Sass

Native CSS Nesting is supported by all modern browsers.

• When to keep using Sass: If your codebase relies heavily on variables, Mixins (functions) to generate dynamic styles, or suffix-based class concatenations (&__child), keeping your preprocessing pipeline is reasonable.
• When to migrate to native CSS: If you are building component libraries or want to simplify your build pipeline by removing compiler dependencies, migrating to native CSS nesting is a great choice.

Understand the rules of native nesting to write clean, maintainable stylesheets.