「ユニバーサルセレクタ」はデメリットだらけを検証

「ユニバーサルセレクタ」のデメリット

  • ブラウザのレンダリングが遅くなる。
  • 良いデフォルトのCSSをリセットしてしまう。
  • フォームの表示がおかしくなるブラウザがある。

とされてきました。
検証しているサイトがあるので紹介します。

levelup.gitconnected.com

Google Lighthouse

Universal Selector - Performance

Normal Selector - Performance

classesForHerpaderp - Performance

Chrome検証

Universal Selector - Performance

Normal Selector - Performance

classesForHerpaderp - Performance


ブラウザのレンダリングは遅くなると認識できるほどではありませんでした。

フォームの表示

  • フォームの場合は、見出し・段落と違い文字のみのボックスモデルとは条件が変わります。
Universal Selector

Normal Selector


フォームの値をもとに戻したい場合は、検証の中で「margin」と「padding」の値を拾い出して指定します。

結局どう記述するか

  • 参考サイト

on-ze.com