noExcessiveSelectorClasses

このコンテンツはまだ日本語訳がありません。

Summary

Rule available since: v2.4.12
Diagnostic Category: lint/nursery/noExcessiveSelectorClasses
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as selector-max-class

How to configure

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

Description

Limit the number of classes in a selector.

Selectors with too many chained classes are harder to read, harder to override, and often signal overly specific styling. This rule enforces an upper bound on how many class selectors can appear in one selector.

Each selector in a selector list is evaluated separately. For example, .foo, .bar.baz is treated as two selectors, and only .bar.baz contributes two class selectors.

Nested selectors are checked as written instead of being resolved against their parent selector. For example, in .foo { &.bar {} }, the nested selector &.bar contributes one class selector.

Examples

Invalid

The following example will show a diagnostic when maxClasses is set to 1:

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorClasses": {
6
          "options": {
7
            "maxClasses": 1
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
.foo .bar {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Expected this selector to have no more than 1 class selector, but found 2.
  
  > 1 │ .foo .bar {}
      │ ^^^^^^^^^
    2 │ 
  
  ℹ Selectors with too many chained classes are harder to read, override, and reuse.
  
  ℹ Reduce the number of class selectors in this selector, or split it into simpler 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.

1
:is(.foo, .bar.baz) {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Expected this selector to have no more than 1 class selector, but found 3.
  
  > 1 │ :is(.foo, .bar.baz) {}
      │ ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Selectors with too many chained classes are harder to read, override, and reuse.
  
  ℹ Reduce the number of class selectors in this selector, or split it into simpler 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

The following examples are valid when maxClasses is set to 1:

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorClasses": {
6
          "options": {
7
            "maxClasses": 1
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
.foo {}

1
.foo, div {}

Options

`maxClasses`

The maximum number of class selectors allowed in a single selector.

This option has no default value. Configure it explicitly to enable the rule. A value of 0 disallows class selectors entirely.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorClasses": {
6
          "options": {
7
            "maxClasses": 2
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

The following selector exceeds the configured limit because it contains three class selectors:

1
.foo .bar.baz {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Expected this selector to have no more than 2 class selectors, but found 3.
  
  > 1 │ .foo .bar.baz {}
      │ ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Selectors with too many chained classes are harder to read, override, and reuse.
  
  ℹ Reduce the number of class selectors in this selector, or split it into simpler 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.