問題描述

小伙伴推薦在 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>