CSSの効率化

1427 ワード

16進数のカラー値対ビット数と大文字と小文字


16進数のカラー値のデフォルト基準は、大文字と6桁の寸法です.未知の状況では冒険を望まず、レンダリングの効率を低下させます.
  • 不賛成-color:#f3a;
  • 推奨-color:#FF33AA;
  • displayとvisibilityの違い


    display非表示オブジェクトは物理空間を保持せず、visibilityは非表示オブジェクトのために占有された物理空間を保持する.ブラウザが占有する物理空間をレンダリングすると、リソースが消費されます.
  • 不賛成-visibility:hidden;
  • 推奨-display:none;
  •  
    border:none;border:0;の違い
    border:0;枠線を隠すことができますが、border-color/border-styleの使用権を保持します.
  • 不賛成-border:0;
  • 推奨-border:none;
  •  
    あまり小さい背景のピクチャーは平らに敷くべきでありません
     
    ファイルのボリュームは非常に小さいが、幅500 pxのプレートをレンダリングするには2500回のタイルを繰り返す必要があります.
     
    賛成しない*{margin:0;padding:0;}ブラウザスタイルの違いを避ける
     
  • 賛成せず、*番ワイルドカード
  • を使用
  • は賛成せず、div span button b tableなどのラベルはワイルドカード制御内外充填様式
  • に組み入れる.
  • は、ワイルドカードを選択的に使用して内外の充填スタイルを制御することを推奨する.

  • *番号ワイルドカードはすべてのラベルを初期化し、ブラウザのレンダリングに一定のリソースを消費します.
     
     
    ID、classクラスはタグ署名やclassで記述しないでください
     
    ID、classはすべて唯一で、すべて必要ありません
  • 差-input#data 1{}
  • よし-data 1{}
  •  
  • 差-input.class1 {}
  • はい-.class {}

  •  
    子の選択を避ける
     
  • 差-treehead treerow treecell { }
  • -treehead > treerow > treecell { }
  • - .treecell-header { }