Nesting too many rulesets makes the code hard to read, refactor and therefore maintain.

Noncompliant Code Example

With the default threshold of 3:

.foo-1 {
  // ...
  .foo-2 {
    // ...
    .foo-3 {
      // ...
      .foo-4 {                    /* Noncompliant: depth = 4 */
        background-color: blue;
        .foo-5 {                  /* depth = 5, exceeding the limit, but issues are only reported on depth = 4 */
          //...
        }
      }
    }
  }
}

stylelint Related Rules

• max-nesting-depth