Disallow duplicate selectors within a stylesheet.
.foo {} .bar {} .foo {} /** ↑ ↑ * These duplicates */
This rule checks for two types of duplication:
a, b, a {}
.a, b {} a, b {}
. Duplicates are found even if the selectors come in different orders or have different spacing, e.g. a d, b > c {} b>c, a d {}
.The same selector is allowed to repeat in the following circumstances:
a {} a, b {}
.This rule resolves nested selectors. So a b {} a { & b {} }
counts as a violation, because the resolved selectors end up with a duplicate.
true
The following patterns are considered violations:
.foo, .bar, .foo {}
.foo {} .bar {} .foo {}
.foo .bar {} .bar {} .foo .bar {}
@media (min-width: 10px) { .foo {} .foo {} }
.foo, .bar {} .bar, .foo {}
a .foo, b + .bar {} b+.bar, a .foo {}
a b {} a { & b {} }
The following patterns are not considered violations:
.foo {} @media (min-width: 10px) { .foo {} }
.foo { .foo {} }
.foo {} .bar {} .foo .bar {} .bar .foo {}
a b {} a { & b, & c {} }
disallowInList: true | false
(default: false
)This option will also disallow duplicate selectors within selector lists.
For example, with true
.
The following patterns are considered violations:
input, textarea { border: 2px; } textarea { border: 1px; }