Josh Comeau＆＃039;のカスタムCSSリセットに関するメモ

最近、Elad Shechterの新しいCSSリセットについて議論し、その後、このテーマに関するJosh Comeauの洞察に富んだブログ投稿について説明しました。これは、CSSリセットランドスケープのシフトを示します。過去の重要なブラウザのスタイリングの違いはあまり一般的ではなく、多くの場合、プロジェクトのスタイリングが進行中に進行中に、とにかく多くのデフォルトスタイルがオーバーライドされています。したがって、「モダンな」CSSリセットは、新しいプロジェクトに実用的な利点を提供するデフォルトスタイルのキュレーションされたコレクションに進化しています。

Joshのアプローチを調べると、それはまさにそのように思われます：本質的にデザイン駆動型ではなく、一般的に望ましいプロジェクト機能を提供することにより、デザインをサポートするスタイルの編集。いくつかの解説で彼の選択を分析しましょう。

 *、 *::前、 *::後{
  ボックスサイズ：ボーダーボックス;
}

広く受け入れられている慣行。グリッドとフレックスボックスのレイアウトの使用の増加により、そのユーティリティはわずかに減少する可能性がありますが、一貫したサイジングには好ましいアプローチのままです。理想的には、CSSリセットは、コンポーネントレベルでのオーバーライドを容易にするために、継承を活用する必要があります。

 * {
  マージン：0;
}

デフォルトマージンを排除する簡潔な方法。状況によっては、潜在的に重荷がかかっていますが、明示的なマージン宣言を実施し、明確さを改善します。これをパディングとpadding: 0;デフォルトのリストアイテムパディングに対処します。

 html、body {
  高さ：100％;
}

パーセンテージベースの高さが正しく機能するようにするための有用な戦略であり、予期しない背景行動を防ぎます。 while body { height: 100vh; }十分に思えるかもしれませんが、おそらくiOSサファリの癖のために同じ信頼性が欠けています。

体 {
  ラインハイト：1.5;
  -webkit-font-smoothing：antialiased;
}

-webkit-font-smoothingプロパティは、過度に薄いタイポグラフィにつながる可能性があります。貴重なツールですが、グローバルアプリケーションは必ずしも理想的ではありません。 htmlセレクターを介してグローバルなタイポグラフィサイズを管理し、メディアクエリでルートフォントサイズを調整すると、より多くの制御が提供されます。 1.5のライン高さは合理的なデフォルトですが、1.4に近い値が一部の場合に好まれる場合があります。ただし、見出し調整が頻繁に必要です。ジョシュの巧妙な代替手段：

 * {
  Line-Height：calc（1em 0.5rem）;
}

これにより、フォントサイズに基づいてラインハイトを動的に調整し、スケーラブルなソリューションを提供します。最適なラインハイト計算に関するヘススリカルテの作業に触発されたこの手法は、探索する価値があります。

 IMG、写真、ビデオ、キャンバス、SVG {
  表示：ブロック;
  最大幅：100％;
}

しっかりと包含。 display: block;ラインハイトの問題を排除し、 max-width: 100%;メディア要素が容器を膨らませるのを防ぎます。の含有中<picture></picture>議論の余地があります<iframe></iframe>そして<object></object>完全性を高めます。

 P、H1、H2、H3、H4、H5、H6 {
  Overflow-wrap：ブレークワード;
}

長い単語（URLなど）がレイアウトを混乱させるのを防ぐために不可欠です。これを.text-contentようなより広いセレクターに適用すると、カスケードが可能になりますが、特定の要素をターゲットにすることは許容されます。追加を検討してください<li>、<dl></dl> 、<dt></dt> 、 そして<blockquote></blockquote>包括的なラインラッピング用。ラインラッププロパティの最適な組み合わせは、継続的な議論の対象のままです。

 #root、#_next {
  分離：分離;
}

このReact/next.js特定のスニペットは、スタッキングコンテキストを作成します。その正確な利点はすぐには明らかではありませんが、明らかな問題は発生しません。

全体として、ジョシュのリセットはよく考えられているアプローチです。さまざまなCSSリセット戦略を調べて比較することは常に有益です。

以上がJosh Comeau＆＃039;のカスタムCSSリセットに関するメモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。