使用自定义属性来写 CSS 选择器是否更优雅？

Question

小伙伴推荐在 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的复杂度。

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

Answer 1

好吧，性能成指数下降。

干嘛不这样写？

css.bg-blue {
  background: blue;
}

html<div class="bg-blue"></div>