no-duplicate-selectors
禁止重复选择器。
.foo {} .bar {} .foo {}
/** ↑ ↑
* These duplicates */
此规则检查两种类型的重复
- 单个选择器与规则的选择器列表重复,例如
a, b, a {}
。 - 样式表中选择器列表重复,例如
a, b {} a, b {}
。即使选择器以不同的顺序或具有不同的间距,也会发现重复项,例如a d, b > c {} b>c, a d {}
。
在以下情况下,允许相同的选择器重复
- 它用于不同的选择器列表,例如
a {} a, b {}
。 - 重复项被确定为源自不同的样式表,例如,您以某种方式连接或编译文件,从而为 PostCSS 生成源映射以供读取,例如 postcss-import。
- 重复项位于具有不同父节点的规则中,例如,在媒体查询内部和外部。
此规则解析嵌套选择器。因此 a b {} a { & b {} }
被视为问题,因为解析后的选择器最终会重复。
message
次要选项 可以接受此规则的参数。
选项
true
以下模式被视为问题
.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 {}
}
以下模式不被视为问题
.foo {}
@media (min-width: 10px) {
.foo {}
}
.foo {
.foo {}
}
.foo {}
.bar {}
.foo .bar {}
.bar .foo {}
a b {}
a {
& b,
& c {}
}
可选的次要选项
disallowInList: true | false
(默认值:false
)
此选项还将禁止选择器列表中的重复选择器。
例如,使用 true
。
以下模式被视为问题
input, textarea {
border: 2px;
}
textarea {
border: 1px;
}