noExcessiveNestedBlocks (CSS)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noExcessiveNestedBlocks
This rule doesn’t have a fix.
The default severity of this rule is warning.
Sources:
- Same as max-nesting-depth

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveNestedBlocks": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce a maximum depth that blocks can be nested.

Deeply nested styles are difficult to read and follow. Every level of nesting also makes the resulting selector longer, which makes the styles harder to override. This rule reports {} blocks nested beyond the configured limit.

The block of a rule or at-rule written at the top level of the file isn’t nested, so it doesn’t count as a level. Wrapping styles in a top-level at-rule, such as @media or @layer, doesn’t add a level either. Every other block adds one level.

Only the outermost block exceeding the limit is reported: blocks nested inside it aren’t reported again.

Examples

Invalid

1
.a {
2
    .b {
3
        .c {
4
            .d {
5
                .e {
6
                    .f {
7
                        color: red;
8
                    }
9
                }
10
            }
11
        }
12
    }
13
}

code-block.css:6:21 lint/nursery/noExcessiveNestedBlocks ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This block is nested too deeply.
  
    4 │             .d {
    5 │                 .e {
  > 6 │                     .f {
      │                     ^^
    7 │                         color: red;
    8 │                     }
  
  ℹ Blocks nested 5 levels deep are hard to read and produce long selectors that are hard to override. The configured maximum is 4.
  
  ℹ Move the nested styles closer to the top level, or use a single class name instead of a chain of nested selectors.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.a {
2
    .b {
3
        .c {
4
            .d {
5
                .e {
6
                    color: red;
7
                }
8
            }
9
        }
10
    }
11
}
12

13
@media (width >= 600px) {
14
    .a {
15
        .b {
16
            .c {
17
                .d {
18
                    .e {
19
                        color: red;
20
                    }
21
                }
22
            }
23
        }
24
    }
25
}

Options

max

Default: 4

The maximum block nesting depth allowed.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveNestedBlocks": {
6
          "level": "on",
7
          "options": {
8
            "max": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
.a {
2
    .b {
3
        .c {
4
            color: red;
5
        }
6
    }
7
}

code-block.css:3:9 lint/nursery/noExcessiveNestedBlocks ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This block is nested too deeply.
  
    1 │ .a {
    2 │     .b {
  > 3 │         .c {
      │         ^^
    4 │             color: red;
    5 │         }
  
  ℹ Blocks nested 2 levels deep are hard to read and produce long selectors that are hard to override. The configured maximum is 1.
  
  ℹ Move the nested styles closer to the top level, or use a single class name instead of a chain of nested selectors.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.a {
2
    .b {
3
        color: red;
4
    }
5
}

ignoreAtRules

Default: []

A list of at-rule names, without the leading @. The blocks of these at-rules don’t count as a level and are never reported. Names are matched regardless of letter case.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveNestedBlocks": {
6
          "level": "on",
7
          "options": {
8
            "max": 1,
9
            "ignoreAtRules": [
10
              "media"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

1
.a {
2
    @media print {
3
        .b {
4
            color: red;
5
        }
6
    }
7
}

noExcessiveNestedBlocks (CSS)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

max

Invalid

Valid

ignoreAtRules

Related links