selector-max-specificity

Limit the specificity of selectors.

    .foo, #bar.baz span, #hoo { color: pink; }
/** ↑     ↑              ↑
 * Each of these selectors */

Use this rule to enforce a convention. For example, limit specificity to "0,2,0", so that styles stay easy to override.

Visit the Specificity Calculator for visual representation of selector specificity.

This rule ignores selectors with variable interpolation (#{$var}, @{var}, $(var)).

This rule adheres to the CSS Nesting specification when calculating specificity. The specificity of the nesting selector (&) is equal to the largest specificity among the complex selectors in the parent's selector list (identical to the behavior of :is()).

Each selector in a selector list is evaluated separately.

warning

This rule is only appropriate for CSS. You should not turn it on for CSS-like languages, such as SCSS or Less.

This rule supports 3 message arguments: the selector, the configured maximum specificity, and the selector's resolved form.

Options

string

Specify a maximum specificity allowed.

The format is "id,class,type", as laid out in the W3C selector spec.

Given:

{
  "selector-max-specificity": "0,2,0"
}

The following patterns are considered problems:

#foo {}

.foo .baz .bar {}

.foo .baz {
  & .bar {}
}

The following patterns are not considered problems:

div {}

.foo div {}

.foo div {
  & div a {}
}

.foo {
  & .baz {}
}