normalize、reset と base

前言

ある物語：

normalize を知っていますか？reset との違いは何ですか？

面接官が尋ね、私はでたらめを言いました（当時確かに知りませんでしたが、2 つの単語の字面の意味は実はとても明確でした）

一.reset

reset：リセット、ゼロクリア

最も乱暴な方法：

* {padding:0; margin:0;}

すべてのタグをすべて剥ぎ取ります。body、h1-h6、div、article など元々それぞれ異なる多くのタグが、今では一模一样になり、名前だけが最後の尊厳として残ります

もちろん、もう少し穏やかな（より長い）ものもあります：

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul{margin:0; padding:0;}

穏やかな reset の原則は：取り除く必要があるものだけを取り除くことです。例えば div は元々何も着ていないのに、さらに剥がされるのは、これは非人道的です

reset を含むスタイル構造は以下のようになる可能性があります：

reset.css   // すべてのデフォルトスタイルを削除
common.css  // プロジェクトで維持する共通スタイル
page.css    // 業務に必要なスタイル（再利用不可）

順序通りに導入し、下のもので上のを上書きします。したがって、あるスタイル属性は層ごとに上書きされた後に初めて最終的な姿でユーザーに提示され、冗長な reset の問題が存在します：もしあるブロックのスタイルが確実にカスタマイズをサポートする必要があるなら、それは必ず後続の css で上書きされるため、必要ありません まず reset で剥ぎ取る必要はありませんか？

二.normalize

normalize：正規化、正常化、標準化

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

normalize はいくつかのことを行います：

• ブラウザのデフォルトスタイルの中で有用な部分を保持

• 同時にクロスブラウザの一貫性を保証（各ブラウザに存在する W3C 仕様に準拠していない問題を修正）

• 適切な場所でデフォルト値を設定

normalize はパッチ 性質のもので、reset が破壊的であるのとは異なります。例えば normalize.css ソースコード：

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

ここでフロントエンド方案を通じてブラウザに存在するスタイル問題を修正し、同時に低バージョンブラウザの互換性を考慮し、ここでは「標準化」を傾向としています。さらに、「正常化」の側面もあります：

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

先輩がすでにソースコードを解釈していますので、CSS Reset に関する那些事（二）之 Normalize.css ソースコード解釈 を参照してください

三.normalize と reset の違い

あるジョーク：

CSS Reset は革命党で、CSS Reset で最も過激な一派はあなた小子が有用か無用かに関わらず、すべてその服を脱げと主張します。なぜあなた body は生まれた時から一圈 margin を着ているのか、なぜあなた姓 h のは他人より太っているのか、なぜあなた ul は一腕のビーズを着けているのか。そこで *{margin:0;} などの運動で、すべてを平らにしました。一見衆生平等のようですが、実際には資源を浪費し、安くもつかず、他人を必要とする時には卑しくも追加して戻す必要があり、本当に他人のデフォルトスタイルを必要とする場合はどうしますか？他人の鍋はすでに炉の中に投げ込んで焼かれましたので、自分で何とかしてください。

Normalize.css は改良派です。彼らは主張します、各要素には存在する理由があり、単純粗暴に一視同仁するのは良くないと。body の那一圏は確かにページの生存空間を圧迫しているので、それを修正します。士農工商、誰有谁の作用があり、彼らに規範を制定し、あらゆるブラウザで自分の仕事をきちんとこなすことを保証します。

知乎 コードを撸る段子手の回答 から引用

reset の特徴

目標：すべてのブラウザの表現を強制的に一致させる

ブラウザからのデフォルトスタイルの大多数を取り除き、common, page などのスタイル下層が整然とした初期表現であることを保証します

したがって一般意義の reset は破壊的で、すべて剥ぎ取ります

主に 2 つの問題が存在します：

• 冗長な reset、パフォーマンスに影響

間違って書かれた reset（本来必要ない）、または上層で必ず上書きされる reset（必要ない）のどちらでも、スタイルファイルを増大させ、レンダリングパフォーマンスに影響します

誤って殺すことも、見逃すことも容易です。正確な高性能 reset？実現は難しく、存在さえしません（FF, Chrome, Safari 以外、まだ一大堆の xx ブラウザがあり、谁知道它的デフォルトスタイルが何なのか）

• グループにセマンティクスがなく、維持が困難

reset 中のタグの分類はセマンティクスを考慮せず、デフォルト表現のみに関心があります

引き起こされる結果は、デバッグツールで某要素を確認し、ある属性に関心を持ち、一層ずつ追っていくと、最後に一連の無関係なタグが一緒に縛られ、1 つか 2 つのルールが適用されているのを見ることになります

パフォーマンスについては、問題になる前は問題ではありません。噂によると * {padding:0; margin:0;} のレンダリングへの影響も 2ms だけで、もし ���当にそうなら、考える必要はなく、直接すべて剥ぎ取るのが最善です。より複雑（より長く、より人道的）な reset がもたらす悪影響（スタイルファイルの増大）と比較して、レンダリング時の 2ms はゴマよりも小さいからです

維持の問題は、実際には正確な高性能 reset を指しており、もし reset が適切であれば、スタイル問題は reset と無関係であるはずです。デバッグ中发现で下層を追う必要があるなら、reset が十分でないことを示しています

「reset しないのはダメですか？」

「もちろんダメです、reset しない場合、那么多のブラウザ、何か奇妙なデフォルトスタイルがあるかもしれないので、フロントエンドは 1px の執着を持つべきで、デザイン稿を正確に再現する必要があります」

実際よく考えてみると、なぜ私たちは reset が必要なのか？みんなが使っているから？

確かに多くの reset スタイルは業務中で永遠に使用されません（古い古董 legend、fieldset および新しいセマンティックタグ aside、section は純モバイルページではほとんど必要ありません）。本当に有用で常用的なものは body {margin: 0; } だけで、他は使用する時に全面的に書き直す必要があるか、永遠に使用されないかのどちらかです

したがって数年前に no reset 運動が巻き起こり、その後 normalize を迎えました……しかし答え は究竟是什么？

normalize の特徴

ソースコードから发现すると normalize はパッチのように、ブラウザのデフォルトスタイルをより「正常」にします：

/* 1.スタイルパッチ、ブラウザの差異を修补し、その表現を標準に近づける */
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/* 2.微量の reset */
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

同様に、ソースコードを通じて发现すると、それは reset の替代品ではありません：

• reset は圧路機 のようで、開いた後で路面は非常に平坦

• normalize はアスファルト のようで、路面の亀裂、小さな穴を埋める

しかし、私たちはこの層のアスファルトが必要ですか？Bootstrap が使ったからといって私たちも使う必要がありますか？

純モバイルページ来说、normalize 里的 98% のスタイルは使用せず、とても巧く、有用な数行はおそらくまだ：

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

もちろん、Bootstrap は PC とモバイル端を同時にサポートする必要があり、大屏小屏を适配し、1 つのフレームワークがこれらの互換コードを導入するのは自然に間違いではなく、より堅牢になります

しかし私たちのアプリケーションは本当に normalize を必要としないかもしれません。必要だとしても、おそらくその中で本当に使用できる 30% だけを取る必要があり、其余の部分は業務の特徴に応じて、ある醜いデフォルトスタイル（例えば table）を取り除き、さらに基礎スタイルを挿入し、各ページでこれらのものを設定するのを避けます。那么最後に産生するこの css は——base.css と呼びます

四.css 三層構造

• base: 基本スタイル

サイトレベルの、最も基礎的で、最も共通のスタイルで、異なるスタイル異なるコンテンツのサイトが base スタイルを共用できます

base は原子的で、これ以上分割できません。例えば互換性の良い flex, clearfix など

reset と base は並列で、基本スタイルコンポーネントとして、もちろん、簡単な reset を base 層に置くこともできます

• common: 共通スタイル

モジュールレベルの、カスタマイズされたスタイルモジュールで、各ページで再利用できます

base 層の基礎上でより複雑なスタイルモジュールを提供します。例えばカレンダー、popup など

• page: ページスタイル

ページレベルの、再利用を必要としないスタイル

具体的なページに対して、特有のスタイルを追加します。例えば具体的な色値、フォント、hack など

合理的な層分けは効果的にスタイルの再利用性を向上でき、高層で簡単に低層のあるスタイルルールを上書きすることで最終的なスタイルを変更できます。さらにスタイルの保守性を向上でき、各層の分業が明確で、新規スタイルは対号入座し、html 中では class 組合の方式で最終的なスタイルを実現します

base 層と common 層は少ない人で責任を持って管理維持すべきで、頻繁に変動しませんが、拡張できます。開発者は直接 UI デザイン稿に対して page 層スタイルを完成し、視覚効果を実現します。page 層スタイルを編写する時も同様に三層構造に従って組織できます。例えば：

/* base */
body {
    background-color: #eee;
}
h1 {
    border-bottom: 1px solid #ccc;
}
/* common */
.panel {
    border: 1px solid #ddd;
}
.line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* page */
h1 span {
    border: 1px solid red;
    border-raduis: 3px;
}
.panel .line {
    line-height: 1.5em;
}

五.まとめ

reset？normalize？必要か？不要か？

業務のためにカスタマイズされたものが最善で、精简、高效です

参考資料

• フロントエンド開発層分け

• necolas/normalize.css

• CSS Reset に関する那些事（一）之 歴史変遷と Normalize.css：この 4 篇文章は 모두不错で、看完就可以考慮して Normalize.css を切開くことができます

• Normalize.css と伝統的な CSS Reset にはどのような違いがあるか？

• 来、讓我們談一談 Normalize.css

• What is the difference between Normalize.css and Reset CSS?

• CSS reset の再検討 – スタイル重置を避ける