私のモダン CSS リセット |ジャケラザロフ.com

すべての Web プロジェクトをコピーアンドペーストで開始する人はどれくらいいるでしょうか Eric Meyer の有名な CSS リセット CSS ツール: CSS をリセット meyerweb.com/eric/tools/css/reset/ ?

長い間、あまり読まずにそれをやっていました。これにより、さまざまなブラウザ間の不一致が解消されることはわかっていましたが、私にとってはそれで十分でした。

そして、数年前、Josh W Comeau による次のようなブログ投稿を読みました。 私のカスタムCSSのリセット 私のカスタムCSSのリセット 私には、プロジェクトごとに付属するベースライン CSS スタイルのセットがあります。以前は、一般的な CSS リセットを使用していましたが、時代は変わり、より適切なグローバル スタイルのセットを使用できるようになりました。 www.joshwcomeau.com/css/custom-css-reset/ 。深い魔法など存在しないことに気づきました。リセットが行うことはすべて、読んで理解できる通常の CSS です。¹

私の CSS リセットは、大まかに Josh のものに基づいていますが、もう少し独自のスタンスをとっており、最終的にほぼすべてのプロジェクトに追加することになる軽いデフォルトのスタイルを適用しています。 CSS もここ数年で急速に改善されており、カスケード レイヤー、論理プロパティ、より適切なテキストの折り返しやネストなどの最新の機能をいくつか組み込むことで、その利点を活用しようとしました。²

おそらく、「CSS リセット」と「クラスレス CSS フレームワーク」の間の境界線が曖昧になっているのだと思います。私の目標は、どちらかの厳密な定義に従うことではありません。このスタイルのセットは、私が構築するほとんどの Web サイトの出発点として適していることがわかりました。

Josh の投稿をまだ読んでいない場合は、今すぐ読んでください。彼は、多くの優れたインタラクティブな例を使用して、リセットについて詳しく説明しています。私のリセットが彼のリセットと異なる点について主に話します。

ここにあります：

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  body {
    line-height: 1.5;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  ol, ul {
    list-style: none;
  }

  :not([class]) {
    h1&, h2&, h3&, h4&, h5&, h6& {
      margin-block: 0.75em;
      line-height: 1.25;
      text-wrap: balance;
      letter-spacing: -0.05ch;
    }

    p&, ol&, ul& {
      margin-block: 1em;
    }

    ol&, ul& {
      padding-inline-start: 1.5em;
      list-style: revert;
    }

    li& {
      margin-block: 0.5em;
    }
  }
}

リセット

まず、すべてが揃っています カスケード層 カスケード レイヤー – Web 開発を学ぶ | MDN この記事のほとんどを理解できたなら、もう十分です。CSS カスケード レイヤーの基本的な仕組みについては理解できたはずです。次に、ボックスモデルを詳しく見ていきます。 developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers 呼ばれた reset:

@layer reset {
  
}

これにより、 優先順位 カスケード レイヤー – Web 開発を学ぶ | MDN この記事のほとんどを理解できたなら、もう十分です。CSS カスケード レイヤーの基本的な仕組みについては理解できたはずです。次に、ボックスモデルを詳しく見ていきます。 developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers リセットの。簡単に言うと、通常のスタイル (つまり、 !important) レイヤーの外側のスタイルは、レイヤー内の通常のスタイルよりも優先されます。レイヤーの優先順位は、レイヤーが宣言された順序によって決まり、後のレイヤーが前のレイヤーをオーバーライドします。一般に、リセットはスタイルシートの最初に配置されます。これは、他のスタイルがこれらを簡単にオーバーライドできることを意味します。

レイヤーはブロックとしてではなくインポート時に宣言することもできることに注意してください。

@import url("reset.css") layer(reset);

次に、マージンとパディングを削除します。

* {
  margin: 0;
  padding: 0;
}

ジョシュは余白のみを削除します。パッドも外します。組み込みのパディングをオーバーライドせずに使用する要素は多くありません。後で説明するように、場合によっては最終的にパディングを追加し直すことになります。

次に、メディア要素:

img, picture, video, canvas, svg {
  display: block;
  max-inline-size: 100%;
}

ジョシュのように、私は彼らを次のように設定しました display: block 奇妙な余分な垂直スペースを避けるためです。

の代わりに max-widthですが、私は使っています max-inline-size:a 論理プロパティ CSS の論理プロパティと値 – CSS: カスケード スタイル シート | CSS MDN CSS の論理プロパティと値モジュールは、物理的ではなく論理的な方向と寸法マッピングを通じてレイアウトを制御できる論理プロパティと値を定義します。論理プロパティは、対応する物理プロパティと方向相対的な等価物を定義します。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values テキストの方向に基づいてレイアウトを制御します。に沿って最大サイズを設定します。 インラインディメンション。英語のような横書き言語の場合、それは幅であり、これは、次の場合とまったく同じように機能することを意味します。 max-width — ただし、縦書きモード (一部のアジア言語など) では、代わりに次のように機能します。 max-height。

次に、フォーム コントロール:

input, button, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: currentColor;
}

これも Josh のスタイルに微調整を加えたものです。その間 font: inherit これらの要素は font-family、 font-size、など、親からの色 (デフォルトは黒) や文字または単語の間隔には影響しません。設定 letter-spacing そして word-spacing に inherit 設定中に、対応するプロパティを親から継承させます。 color に currentColor 親のテキストの色も引き継ぎます。

Josh のリセットが Eric Meyer のリセットと異なる注目すべき箇所の 1 つは、リスト スタイルのリセットです。

ol, ul {
  list-style: none;
}

リスト スタイルは頻繁に削除するので、リセットに含まれています。繰り返しますが、場合によってはリスト スタイルが再適用されることが後でわかります。

フレームワーク

ここで、このリセットが「クラスレス CSS フレームワーク」に移行します。始めます 追加し直す を使用して、ページにスタイルを追加します。 CSS のネスト CSS ネスト – CSS: カスケード スタイル シート | MDN CSS ネスト モジュールは、セレクターをネストするための構文を定義し、親ルールのセレクターを基準にして子ルールのセレクターを使用して、あるスタイル ルールを別のスタイル ルール内にネストする機能を提供します。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting このセレクターですべてをラップするには:

:not([class]) {
  
}

以下のすべてのセレクターはこのブロック内にネストされており、クラスなしですべての要素を選択します。要素にクラスを追加する場合、それはおそらく、基本スタイルを使用するのではなく、その要素を具体的にカスタマイズしたいためであると考えられます。の :not([class]) selector を使用すると、スタイルの基本セットを、クラスなしでよく使用する要素 (たとえば、 or

h1&, h2&, h3&, h4&, h5&, h6& {
  margin-block: 0.75em;
  line-height: 1.25;
  text-wrap: balance;
  letter-spacing: -0.05ch;
}

p&, ol&, ul& {
  margin-block: 1em;
}

ol&, ul& {
  padding-inline-start: 1.5em;
  list-style: revert;
}

li& {
  margin-block: 0.5em;
}