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

问题描述

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

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

问题解答

好吧，性能成指数下降。

干嘛不这样写？

css.bg-blue { background: blue;}

html<p class='bg-blue'></p>