README.md

Max nesting depth

Limit the maximum nesting depth of CSS rules and at-rules.

.page {
  .sidebar {
    .nav { /* ← depth 2 */
      color: blue;
    }
  }
}

Deeply nested CSS makes stylesheets harder to read, increases specificity unpredictably, and often signals overly coupled component styles. This rule applies to both native CSS nesting and wrapping at-rules like @media, @supports, and @container.

Options

Number (required)

The maximum nesting depth allowed. Must be a non-negative integer. Setting 0 enforces that no nesting is used at all.

Given:

1

the following are considered violations:

.page {
  .sidebar {
    .nav { /* depth 2 — violation */
      color: blue;
    }
  }
}

@media (min-width: 600px) {
  @supports (display: grid) {
    .rule { /* depth 2 — violation */
      color: blue;
    }
  }
}

The following patterns are not considered problems:

.sidebar {
  .nav-link { /* depth 1 — ok */
    color: blue;
  }
}

@media (min-width: 600px) {
  .sidebar { /* depth 1 — ok */
    color: blue;
  }
}

Prior art

• stylelint's max-nesting-depth rule