小伙伴推荐在 css 中使用自定义属性代替 class 做选择器,

html:

<button bg="blue">blue</button>
<button bg="red">red</button>

css:

[bg="blue"] {
  background-color: blue;
}
[bg="red"] {
  background-color: red;
}

http://codepen.io/Integ/pen/YPRpWE

相比用 class 和 tagname 做选择器，每个属性控制一个样式更加清晰明了，避免了选择器中 class 对权重的影响。

但是自定义属性增加了html的复杂度。

前端应该如何合理使用属性选择器？