modern-css-resetのアンインストールとreset.cssの作成

[takashi0602]

close #310

概要

modern-css-resetがアーカイブされたためアンインストールし、作者が誘導していたhttps://piccalil.li/blog/a-more-modern-css-reset/内のCSSを使用するようにしました。

※ vanilla-extractのglobalStyleを使用してみたがtext-wrapに対応していなかったため、CSSファイルとして追加しました

[uyupunpopunpo]

Storybook URL: https://uyupun.github.io/official/chore_310_modern-css-reset/storybook/
Lighthouse URL: https://uyupun.github.io/official/chore_310_modern-css-reset/lighthouse/

[tyokinuhata]

リセットCSSってライブラリに頼らず、コードベースに直接含めるのが一般的なの？

[takashi0602]

そのイメージっすね
public以下でもいいけど、public以下だとビルド時にミニファイされなかったはずで、src以下だとミニファイなど最適化される（ベンダープレフィックスを追加したりとか）のでこっちが一般的なんかなと思ってる🫡

↑普通に読み間違えてました🙇‍♂️

正直このあたりは好き嫌いで分かれそうかなというイメージっすね
個人的には好みはないのでどちらでもいいな〜という感じっす
もし導入するなら、昔からよく聞くressとか、destyle.cssとかかな🤔

一応今のリセットCSSはtailwind cssでも使われてるらしい👀

[tyokinuhata]

CSSのリセットなのでそこまで大きな機能を提供するものではないものの、コードベースに直接含めてしまうとメンテナンスを自分たちでしないといけなくなってしまうという問題はあると思ってて、例えばHTML/CSSのアップデートでCSSのリセット方法に変化があった場合も能動的に変更しないといけない(ライブラリならアップデートだけで済む)のかなーと

[tyokinuhata]

モダンでライブラリの形で提供されているリセットCSSって他にないんだろうか、、、

[takashi0602]

これ参考になりそうかな👀
https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html

• modern-css-reset
  • 今のやつ
• @acab/reset.css
  • :whereで詳細度を低く保ち、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位、color-schemeによる自動ダークモードなど、CSSの新機能を効果的に使用した新時代のリセットCSS。
• Josh's Custom CSS Reset
  • 過去のリセットCSSは10年以上も更新されておらず、その間にCSSは進化しました。最近のデバイス・モダンブラウザの仕様に対応したモダンリセットCSSです。このリセットCSSはデザインに関係なく、どんなプロジェクトでも使用できます。
• The New CSS Reset
  • CSSの新しい機能を使用した、シンプルで軽量なCSSのリセット。
    displayプロパティを除いて、ブラウザから取得されるデフォルトのスタイルを使用したくないという目的に基づいて構築されています。
• CSS Remedy
  • モダンブラウザだけをターゲットにするのが難しい場合は、この「CSS Remedy」がお勧めです。Mozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたリセットCSSです。
    プロパティや値を後方互換性について心配する必要がない場合のみ定義し、CSSがデフォルトでどのように動作するべきか現代的な考えでUAスタイルを上書きすることができます。
• Reboot.css
  • Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのリセットCSSとして設計された「Reboot.css」です。Bootstrapで採用されているリセットCSSで、多くの実績があるのも特徴です。
    Reboot.cssはnormalize.css 2.0に似ていますが、リセット用の便利なスタイルが用意されています。
• Eric MeyerのCSS Reset
  • さすがに古いので使用するには、カスタマイズが必要だと思います。
• normalize.css
  • バージョンアップが重ねられ、2023年でも現役で使用できるリセットCSSです。
• sanitize.css
  • reset.cssとnormalize.cssに続くリセットCSS。

[takashi0602]

パッと見た感じ、リセットCSS自体そこまで変更されることはないので、更新が数年前みたいなものがほとんどっすね。。。
入れるなら The New CSS Reset とかかな🤔

[tyokinuhata]

• https://github.com/mayank99/reset.css
• https://github.com/elad2412/the-new-css-reset

この二択かな

[tyokinuhata]

どっちでも良さそう。おまかせします

[takashi0602]

個人的に↓のほうがマージン打ち消してるしよさそうやわ、これ入れますわ
https://github.com/mayank99/reset.css

[tyokinuhata]

このPRはクローズでも良さそう

[takashi0602]

https://github.com/mayank99/reset.css を導入するのでこのPRはクローズします