見栄えの良いサイトに必要な最小限のCSS（2023年）

リセットって過大評価されてるよね。OPがやってるような個人ブログのミニマルなセットアップなら、プラットフォーム間でそんなに一貫性が必要ないと思う。リセットして一貫性を求めるのは、デザイナーの頭が「場所によって少し違って見えるのも全然オッケー」ってことを受け入れられないだけじゃないかな。

一貫性じゃなくて、基本的な読みやすさの問題だよね。いろんなプラットフォームやブラウザで違いは出るけど、ちゃんと読めるのが大事。見た目が完璧じゃなくても、1994年のデフォルトよりは使いやすいと思う。

そういうブラウザ拡張は、ウェブサイトの内容に完全にアクセスする必要があるから、使わない人もいるんだよね。

ブラウザは、サイトごとにダークモードのCSS設定を切り替えられるように設定されるべきだったと思う。サイトごとのズーム設定を許可しているのと同じようにね。ブラウザ全体をライトテーマに設定するのは間違った解決策だよ。一部のウェブサイトはダークモードの方が見栄えが良くて、他はライトモードの方がいいから。さらに、ブラウザの設定はウェブサイトの内容だけでなく、ブラウザ自体のUIにも影響するんだ。もちろん、これらは解決可能な問題だけど、一番簡単で明白な対処法は、ズーム設定と同じ場所にサイトごとのフラグを追加することだと思う。

デフォルトスタイルは悪くないと思う。言われているほどひどくはないよ。ただ、追加したいのは（画像があるウェブページに対して）「img { max-width: 100%; }」かな。この記事でも触れられているし、動画やSVGにも意味があると思う。だけど、もしこれが気に入らないなら、ユーザーがカスタマイズできるようにすべきだよね。もしこれが異なるスタイルを使っているウェブページに問題を引き起こすなら、ユーザーのCSSを優先するための属性を追加できるといいな（場合によっては、ウェブページがこの属性を指定していないときにブラウザが自動的に判断できるかもしれない）。ユーザーは、必要に応じてウェブページのCSSを完全に無効にすることもできるけど、特定のウェブページやウェブアプリ内のスタイリングクラスやその他の複雑なものにウェブページのCSSが必要ないことを指定できるようになるんだ。（ユーザーが自分のCSSを定義しなければ、ウェブページで定義されているものを使うことになるし、ウェブページにCSSがなければデフォルトを使うことになる。デフォルトは、CSSがないウェブページに対してライト/ダークスキームを適切にサポートするように変更されるべきだけどね。）そして、私が言った仮定の属性は無視されることになる。

昼は明るくて、夜は暗い方が好きだな。そんな感じでOSを自動で切り替えるスケジューラーを使ってるし、他のアプリもそれに合わせて設定してる（例えば、自動設定のアプリやダークリーダーのブラウザとか）。特にモバイルでは、昼間は暗いと反射が強くて、夜は明るいと眩しいから、これが大事なんだよね。

これ、何回か見たことあるけど、なんか目に合わないんだよね。古さを感じさせないシンプルさや機能性が足りないし、逆に新しさもないから、ちょっと微妙な感じ。フォントのせいかもしれないけど、あんまり読みやすくないな。もしかしたら、俺だけかもしれないけど。

100バイト: https://www.swyx.io/css-100-bytes （こういうデザインのアドバイスをたくさん集めてるんだ。もっと見たい人は: https://github.com/swyxio/spark-joy/）