noDuplicateSelectors (CSS)

Language CSS

Summary

Rule available since: v2.4.9
Diagnostic Category: lint/suspicious/noDuplicateSelectors
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 warning.
Sources:
- Same as no-duplicate-selectors

How to configure

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

Description

Disallow duplicate selectors.

Two rules are duplicates when their selectors target the same elements within the same surrounding at-rules. The comparison treats equivalent spellings as equal:

whitespace differences are ignored;
HTML element names are compared without case (DIV equals div);
the order of combined parts is ignored (.a.b equals .b.a);
the order of a selector list is ignored (.a, .b equals .b, .a).

Nested selectors are expanded before comparison. For example, a { & b {} } is compared as a b. A selector inside an at-rule such as @media is compared only with selectors inside the same at-rule, not with a matching selector at the top level.

SCSS limitations

This rule does not evaluate SCSS. It compares selectors within the same SCSS block, but does not expand mixins, includes, or @extend. Selectors containing interpolation or placeholders are ignored because their emitted form cannot be determined statically.

Examples

Invalid

1
.foo {}
2
.foo {}

code-block.css:2:1 lint/suspicious/noDuplicateSelectors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Duplicate selector list ".foo".
  
    1 │ .foo {}
  > 2 │ .foo {}
      │ ^^^^^^^
    3 │ 
  
  ℹ It was first defined here.
  
  > 1 │ .foo {}
      │ ^^^^^^^
    2 │ .foo {}
    3 │ 
  
  ℹ Declarations in the later rule can silently override the earlier ones, and duplicated rules make the stylesheet harder to maintain.
  
  ℹ Remove or merge the duplicate rule to keep the stylesheet clean.

1
.foo, .bar {}
2
.bar, .foo {}

code-block.css:2:1 lint/suspicious/noDuplicateSelectors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Duplicate selector list ".bar, .foo".
  
    1 │ .foo, .bar {}
  > 2 │ .bar, .foo {}
      │ ^^^^^^^^^^^^^
    3 │ 
  
  ℹ It was first defined here.
  
  > 1 │ .foo, .bar {}
      │ ^^^^^^^^^^^^^
    2 │ .bar, .foo {}
    3 │ 
  
  ℹ Declarations in the later rule can silently override the earlier ones, and duplicated rules make the stylesheet harder to maintain.
  
  ℹ Remove or merge the duplicate rule to keep the stylesheet clean.

1
a b {}
2
a {
3
  & b {}
4
}

code-block.css:3:3 lint/suspicious/noDuplicateSelectors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Duplicate selector list "a b".
  
    1 │ a b {}
    2 │ a {
  > 3 │   & b {}
      │   ^^^^^^
    4 │ }
    5 │ 
  
  ℹ It was first defined here.
  
  > 1 │ a b {}
      │ ^^^^^^
    2 │ a {
    3 │   & b {}
  
  ℹ Declarations in the later rule can silently override the earlier ones, and duplicated rules make the stylesheet harder to maintain.
  
  ℹ Remove or merge the duplicate rule to keep the stylesheet clean.

Valid

1
.foo {}
2
.bar {}

1
.foo {}
2
@media (min-width: 600px) {
3
  .foo {}
4
}

1
.foo {
2
  .foo {}
3
}