noDuplicateSelectors (CSS)

Language CSS

Summary

Rule available since: v2.4.9
Diagnostic Category: lint/nursery/noDuplicateSelectors
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
      "nursery": {
5
        "noDuplicateSelectors": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow duplicate selectors.

This rule checks for duplicate selectors across a stylesheet. A duplicate occurs when two rules have the same fully-resolved selector list (after sorting for order-independence), within the same at-rule context.

Selectors are normalized before comparison so that equivalent selectors written differently are still caught:

Whitespace differences are ignored.
HTML type selectors are compared case-insensitively (DIV == div).
Compound selector parts are order-normalized, so .a.b and .b.a are considered equal.
Selector list order is ignored: .a, .b and .b, .a are equal.

CSS nesting is fully resolved before comparison: a { & b {} } produces the resolved selector a b, which is compared against all other resolved selectors in the same context.

Selectors are only compared within the same at-rule context. A selector inside @media is not considered a duplicate of the same selector at the top level.

Examples

Invalid

1
.foo {}
2
.foo {}

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

  ⚠ Duplicate selector list ".foo".
  
    1 │ .foo {}
  > 2 │ .foo {}
      │ ^^^^^^^
    3 │ 
  
  ℹ It was first defined here.
  
  > 1 │ .foo {}
      │ ^^^^^^^
    2 │ .foo {}
    3 │ 
  
  ℹ Remove or merge the duplicate rule to keep the stylesheet clean.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.css:2:1 lint/nursery/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 │ 
  
  ℹ Remove or merge the duplicate rule to keep the stylesheet clean.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.css:3:3 lint/nursery/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 {}
  
  ℹ Remove or merge the duplicate rule to keep the stylesheet clean.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.foo {}
2
.bar {}

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

1
.foo {
2
  .foo {}
3
}