Reset CSS / Normalize CSSについて改めて考えてみる

Tailwind などのフレームワークを使わない場合、ほとんどのWEBサイトでは何かしらの”Reset CSS” または “Normalize CSS” と呼ばれるようなスタイルが読み込まれていることが多いと思います。

多くの場合、そこまで深く考えずに有名なものをそのまま導入しているのではないでしょうか。

自分も長い間そうでしたが、Lism CSS を開発していく中で、改めて一から考え直してみました。

Reset CSS と Normalize CSS の違い

Reset CSS と Normalize CSS の違いは、ざっくりと言うと以下のようなものだと自分は認識しています。

• Reset CSS: ブラウザのデフォルトスタイルを完全にリセットして、一度白紙状態する。
• Normalize CSS: ブラウザのデフォルトスタイルを尊重しつつ、ブラウザの差異をなくす。

自分的にはどちらかというと Normalize CSS 的なアプローチの方が良いと思っています。

Reset系の極端なものだと*{all:unset}のようなものもありますよね。
しかしスタイルを打ち消しまくったところで、打ち消しが強すぎて結局デフォルトスタイルを自分で書いていくときにいっぱいCSSを書くことになったりします。

また、現在は各ブラウザが用意してくれているデフォルトスタイルにそこまで大きな差があるわけでもなく、わざわざ全てを打ち消すようなことをしなくてもいいような気がします。

CSSが読み込まれないHTMLタグだけの文書であっても最低限の可読性を保つためのデフォルトスタイルがあるわけなので、せっかくならそれを尊重した上で必要なスタイルを設定すればいいのではないかというのが自分の考えです。

各種HTMLタグのベーススタイルの設定

Reset CSS にしろ Normalize CSS にしろ、それらを導入下上で、サイトごとに各種HTMLタグのベーススタイルの設定をすることになると思います。

Reset系を導入した場合、全てのスタイリングを改めて自分で定義していくことになります。
Normalize系を導入した場合、とりあえず必要だとわかっているものだけ設定しておけば、その他のタグはスタイリングをしなくても致命的な表示崩れは発生しないでしょう。

ただし、 Normalize系だとある程度htmlタグに対するスタイリングも含まれていることがあります（見出しサイズなどが定義されていたりする）ので、その後に自分でも書くと二重でスタイリングをしてしまうタグも出てきます。

個人的にはできるだけ二重で書くという無駄なことはしたくありません。 そこで、以下のことを意識しています。

実際に採用中の CSS

Lism CSS で採用しているReset CSSについてまずは紹介していきます。（名前は reset.css ですが、実際には Normalize CSS 的な役割です）

それぞれのCSSの役割はソースコード内にコメントを残しているのでそちらを読んでください。

方針としては、次のようになっています。

この reset.css を読み込む方法

このCSSは lism-css パッケージ内で単体でも配布しているので、簡単に導入していただけます。

<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/reset.css" rel="stylesheet" />

当サイトで紹介するデモページでも読み込んでいます。

当サイトで紹介するTipsや実装例では、実際の表示が確認できるようにでもコンテンツのプレビューを記載しているものが多くなります。

そのプレビューページでも共通してここで紹介した reset.css を読み込んでいるので、手元で動作確認するためにコードをコピペして試す際にはこのreset.cssも読み込むようにしてください。

HTMLタグのベーススタイルの設定にはデザイントークンを使用する

HTMLタグのベーススタイルの設定は、次の@layer階層で行います。

Lism CSS ではデザイントークンをあらかじめ定義してそれらを流用する設計方針をとっているので、このベーススタイルの初期セット段階から積極的にそれらのトークンを使用しています。

さらに、この中で、サイトによってよく変更されるスタイルも最初から変数で管理しています。

このように早い段階から変数を使用することで、基本はどのサイトにも同じスタイルを使い回しながら、サイトごとの細かな設定の違いは変数の上書きだけで対応できるようになるので便利です。