過拘束されたCSSスタイル

過制約

過拘束してCSSスタイルとは何ですか？

、CSSコードは、流線に十分ではありません

十分な、あまりにも多くの不必要な制約を追加されていないコードを合理化

例えば：

相対位置決め要素（位置：相対;）頂部および底部の垂直位置によって決定されるが、一般に、1つの属性を使用します。

HTML

< 本部>私は比較的要素を配置した< DIV >

CSS

移行制約コード：

DIV { 
      位置：相対。
      下：100pxに。
      トップ：-200px ; 
      幅：200pxの。
      高さ：200pxの。
      背景色：lightcoral。
  }

良いクリーンなコード

DIV { 
    位置：相対。
     トップ：-200px ; 
     幅：200pxの。
     高さ：200pxの。
     背景色：lightcoral。
}

 

第二に、使用の子孫セレクタや要素セレクタ

HTMLとCSSコードの別々の正常な発達に。使用子孫セレクタCSSコードを真剣にHTMLコード、構造が変更されたHTMLコード構造に結合され、彼らはCSSのコードを変更する必要があります。これは非常に厄介な状況になります。

例えば：これは非常に面倒コードです

身体のdiv UL李 {     ...    }

 

第三に、速記プロパティを使用してみてください

使用してコードをより簡単にすることができますプロパティを速記、軽量

1、簡単な不正なコード

■は { 
      ボーダートップ：100pxに固体ブルー ; 
      border-left：100pxに固体青 ; 
      border-right：100pxに青色の固体 ; 
      border-bottom：100pxに固体青 ; 
      幅：100ピクセル ; 
      高さ：100pxに。
  }

 図2に示すように、簡潔なコード

■は { 
      ボーダー：10pxの青色固体。
      幅：100ピクセル ; 
      高さ：100pxに。
  }

 

第三に、不必要な重複を避けるために、

1、冗長重複コード

.box1 { 
     色：赤。       
     フォントサイズ：15ピクセル ; 
}     
.box2 { 
     色：赤。
     フォントサイズ：15ピクセル ; 
}

  図2に示すように、簡潔なコード

.box1、.box2 { 
     色：赤。
     フォントサイズ：15ピクセル ; 
}

 

第四に、良いコードのフォーマット

コードの可読性と保守性は直接的な関係を持っています。

1、コードを読み取ることは容易ではありません

.PREラウンド、.nextラウンド、.middleラウンド {    ...     }

2、読み取り可能なコード

.PREラウンド、
.nextラウンド、
.middleラウンド { 
 ...
 }

読み取り可能コード

.round { 
        背景画像：   
        リニアグラジエント（＃000、#CCC）、    
        線形勾配（#CCC、#ddd） 。   
        ボックスシャドウ：   
        2ピクセル2ピクセル2ピクセル＃000、    
        1pxの4PX 1ピクセル1ピクセル#dddインセット。      
}

 

---

参考ブログ：

https://www.xp.cn/b.php/78217.html