selector-max-specificity

Limit the specificity of selectors.

    .foo, #bar.baz span, #hoo { color: pink; }/** ↑     ↑              ↑ * Each of these 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 counting the specificity of a selector. Each selector in a selector list is evaluated separately.

Options#

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 problems:

#foo {}

.foo .baz .bar {}

.foo .baz {  & .bar {}}

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

The following patterns are not considered problems:

div {}

.foo div {}

.foo div {  & div a {}}

.foo {  & .baz {}}

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

Given:

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

The following patterns are not considered problems:

:global(.foo) .bar {}

:local(.foo.bar)

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

The following patterns are considered problems:

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

:local(.foo.bar.baz)

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