search

syunto07ka / jewelry_box

2 stars 0 forks source link

リセットCSSを導入する #51

Closed piro0919 closed 4 years ago

piro0919 commented 4 years ago

Is your feature request related to a problem? Please describe. 描画がブラウザやOSごとのクセに引っ張られるのはよろしくない

Describe the solution you'd like リセットCSSの導入を考えてみてください

Additional context ざっくりとで良いので、選定基準も書いてください 👍

syunto07ka commented 4 years ago

デフォルトでいい気がした。使い方簡単+公式が勧めている+css-loaderに適している https://create-react-app.dev/docs/adding-css-reset/

styled-componentだとこっちを使うといいのか？ https://www.npmjs.com/package/react-style-reset

syunto07ka commented 4 years ago

ん、でもscssだとimportできなさそう。cssだといけるのか

piro0919 commented 4 years ago

@syunto07ka

デフォルトでいい気がした。

せっかくなので勉強がてら、メジャーなリセットCSSを調べてみましょうか 👍

syunto07ka commented 4 years ago

見落としてた。。

syunto07ka commented 4 years ago

これよくまとまってそうですね👀 以下の記事を自分なりに3つほどrewriteしてみますね

https://web-camp.io/magazine/archives/30817

githubで公開している人も(gistって初めて知った) https://gist.github.com/DavidWells/18e73022e723037a50d6/revisions

syunto07ka commented 4 years ago

そもそもReset CSSちゃんとわかってなかったので軽くまとめる

Eric Meyer’s “Reset CSS” 2.0

サイト

特徴

Normalize.css

サイト

特徴

sanitize.css

サイト

特徴

syunto07ka commented 4 years ago

@piro0919 軽くまとめてみました！7つの中から3つ選んでざっくり書いてみました。 これを踏まえるとnormarize.cssかsanitize.cssが良いかなと思いました(ボタンとかリストとか見出しタグの大きさとかが変わってほしくないため)

ここちがうよ！とかこれまとめてないのだめ！とかあればご指摘を🙇

piro0919 commented 4 years ago

@syunto07ka

そこまで深く言及はしないですが、何点か

コピペで使える。最初は必須でpackageのinstallをしないといけないかと思ってたけどそんなことはない。ただ同じ効果のあるCSSを読み込ませていればよいだけ。

コピペで使えるのは認識として正しいですが、パッケージ化されているものはパッケージを使うほうが個人的には良いかなーと思います コピペだと個々人で修正可能な状態になってしまうので保守性に欠けますし、バージョン管理が面倒ですしね

input要素はブラウザ固有のまま(<- これはよくない)

良くないことはないですね、ブラウザ固有のスタイルを使用したいケースでは有用だと思います

これを踏まえるとnormarize.cssかsanitize.cssが良いかなと思いました(ボタンとかリストとか見出しタグの大きさとかが変わってほしくないため)

実際のプロジェクトでは、こういった理由で選定することになると思います 余談ですが、個人的にはress推しだったりします

syunto07ka commented 4 years ago

コピペで使えるのは認識として正しいですが、パッケージ化されているものはパッケージを使うほうが個人的には良いかなーと思います コピペだと個々人で修正可能な状態になってしまうので保守性に欠けますし、バージョン管理が面倒ですしね

まさに。今回はデフォルトのnormarize.cssを使いますが、別のreset cssを使う場合はpackageをinstallして運用すべきですかね

ブラウザ固有のスタイルを使用したいケースでは有用だと思います

なんていうことがあるんですか！？(ないとは言い切れないけど)

piro0919 commented 4 years ago

@syunto07ka

なんていうことがあるんですか！？(ないとは言い切れないけど)

そこまで考えている現場にあたったことがないのでなんとも言えないですねー ただ、ブラウザ固有のCSSが悪というわけでは決してないので、ケースバイケースだと思っていたほうが良いとは思いますね