noExcessiveSelectorClasses (CSS)

Language CSS

Summary

Rule available since: v2.4.12
Diagnostic Category: lint/complexity/noExcessiveSelectorClasses
This rule isn’t recommended, so you need to enable it.
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
      "complexity": {
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 combined with their parent. For example, in .foo { &.bar {} }, the nested selector &.bar contributes one class.

Examples

Invalid

This example reports a diagnostic when maxClasses is 1:

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

1
.foo .bar {}

code-block.css:1:1 lint/complexity/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.

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

code-block.css:1:1 lint/complexity/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.

Valid

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

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

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
      "complexity": {
5
        "noExcessiveSelectorClasses": {
6
          "level": "on",
7
          "options": {
8
            "maxClasses": 2
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

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

1
.foo .bar.baz {}

code-block.css:1:1 lint/complexity/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.