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

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

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

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

https://levelup.gitconnected.com/the-css-universal-selector-is-slow-and-should-be-avoided-yet-another-lie-eb4d15f4c320levelup.gitconnected.com

Google Lighthouse

• Webページの読み込み速度やパフォーマンス、SEOを多角的に評価してくれる
• 使用したデータ「Index of /for_others/medium_articles/univeralSelector/ - CutCodeDown」

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