CSSセレクター、class VS tag

スコープ付きスタイルでは class は必要です。 ブラウザが様々な CSS セレクタを描画するため、p { color: red } はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし .example { color: red } のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。

OperaでもWebKitでも、 input[type="..."] より [type="..."] セレクタの方が、負荷が高いようです。恐らく、ブラウザが属性チェックを指定タグの要素に制限しているためかと思われます

https://postd.cc/profiling-css-for-fun-and-profit-optimization-notes/

• タグセレクタの場合
  • 例：p[data-v-510d9dca]
  • 属性チェックがタグの要素にかかるため遅い
• クラスセレクタの場合
  • 例：.example[data-v-510d9dca]
  • 属性チェックがクラスの要素にかかるため速い

だいぶ古い記事だが、CSSセレクターのパフォーマンスへの影響は非常に軽微で、もっと他に直すところあるだろ！と言っている

BEMとかいうCSS設計思想があるらしい。
勉強すべきはこれか。

更に深淵を覗いた記事

https://qiita.com/kazatsuyu/items/b94733555f34f2645221#fn1