本文は「堅牢なUIデザインの寸法ガイドby鄭燦明|クイックキャンパス」課の総括である.

reset.css

reset.css (1kB)
Eric A. Meyer
最終更新日時:2011年1月
現在の状況では、ほとんどのスタイルは宣言する必要はありません.
https://meyerweb.com/eric/tools/css/reset/

normalize.css (1.3kB)
necolas
前回更新日時:2018年11月
デフォルトのタグスタイルを上書きします.
一般的でないラベル(hr,pre)を上書きします.
https://github.com/necolas/normalize.css/blob/master/normalize.css

Universal selector * reset

(できるだけxを使う)
*,:before,::afterのスタイルをすべてリセットすると、最初は便利でしたが、その後のスタイルが上書きされるか、不要なスタイルがすべての要素に適用されます.

Find unused CSS(Show Coverage)

未使用のcssの検索方法

ショートカットキー
Mac : Cmd + Shift + P + (coverage)
Win: Ctrl + Shift + P + (coverage)

赤いcssは使用しません.しかし、赤で表される誤りの多くは間違いではない.
エラー:font-faceの場合、使用しているにもかかわらず使用しません.

Summary

ほとんどの初期化スタイルは無効または上書きされています.

CSS reset reinvent

スタイルをリセットするために推奨されるコード

/* Reset body */ 
body { 
  margin: 0; 
  overflow-wrap: break-word; 
  //넘치는 것을 랩핑 시켜주는 속성, 공백없이 1바이트 문자열들이 레이아웃을 깰 때 사용  
  //문제 : 한국어도 강제로 줄바꿈 시킴 
 } 
 /* Do not break Korean words */
 :lang(ko) { word-break: keep-all; } 
 //CJK 한국어, 중국어, 일본어의 강제 줄바꿈을 막아준다. 

 /* Reset img */ 
 img { 
   max-width: 100%;
   height: auto;
 }

classプロパティラベルのみリセット

スタイルをリセットするには、classという属性を含む要素を検索するだけです.
WeigeWeek編集では、作成したスタイルやラベルを維持できます.

/* CSS Reset by [class] */ 
[class] {
  margin: 0;
  padding: 0;
  box-sizeing: border-box;
  list-style: none; //ol, ul
  border: 0; //button, table, input, fieldset, textarea, select, iframe 
  background-color: transparent; //button, dialog, input, mark, meter, progress 
  border-collapse: collapse; //table 
  border-spacing: 0; //table 
  -webkit-appearance: none;
  appearance: none // button, input, textarea, select, meter, progress
} 

[class]::before,
[class]::after {
	box-sizing: border-box;
}

List-styleは初期化する必要がありますが、classを含むすべての要素にスタイルを過度に適用するのは問題です.

トラブルシューティング方法

where構文を使用して、特定のタグをかっこ(タグ)に配置し、特定のクラスにのみ適用します.(必要な範囲のみ)
whereとis構文は、サムスンのインターネットブラウザではサポートされていません.

/* CSS Reset by [class] */ 
[class] { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 

[class]::before, 
[class]::after { box-sizing: border-box } 
[class]:where(ol, ul) { list-style: none } 
[class]:where(button, fieldset, iframe, input, select, textarea) {  border: 0 } 
[class]:where(button, dialog, input, mark, meter, progress) { background-color: transparent; } 
[class]:where(table) { 
  border:0; 
  border-collapse: collapse; 
  border-spacing: 0;
} 

[class]:where(button, input, meter, progress, select, textarea) { 
  -webkit-appearance: none; 
  appearance: none; 
}