selector-max-specificity.md

Pattern: Selector specificity is too high

Issue: -

Description

Limit the specificity of selectors. Visit the Specificity Calculator for visual representation of selector specificity.

This rule ignores selectors with variable interpolation (#{$var}, @{var}, $(var)). This rule resolves nested selectors before calculating the specificity of a selector.

Examples

string: Maximum specificity allowed.

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

For example, with "0,2,0":

The following patterns are considered violations:

#foo {}

.foo .baz .bar {}

.foo .baz {
  & .bar {}
}

.foo {
  color: red;
  @nest .baz .bar & {
    color: blue;
  }
}

The following patterns are not considered violations:

div {}

.foo div {}

.foo div {
  & div a {}
}

.foo {
  & .baz {}
}

.foo {
  color: red;
  @nest .baz & {
    color: blue;
  }
}

Configuration

ignoreSelectors: ["/regex/", "string"]

Given:

["0,2,0", {
  ignoreSelectors: [":global", ":local", "/some-/"]
}];

The following patterns are not considered violations:

:global(.foo) .bar {}

:local(.foo.bar)

:local(.foo, :global(.bar).baz)

The following patterns are considered violations:

:global(.foo) .bar.baz {}

:local(.foo.bar.baz)

:local(.foo, :global(.bar), .foo.bar.baz)

Further Reading

• stylelint - selector-max-specificity