css3代碼書寫規範

不要使用 @import 與 <link> 標籤相比，@import 指令要慢不少，不光增長了額外的請求次數，還會致使不可預料的問題。

1，CSS有些屬性是能夠縮寫的，好比padding,margin,font等等，這樣精簡代碼同時又能提升用戶的閱讀體驗。

# Bad    
p{padding-top:20px; padding-bottom:20px; padding-left:20px;padding-right:20px;}  
# Good
p{padding:20px}

注：簡寫形式的屬性聲明 在須要顯示地設置全部值的狀況下，應當儘可能限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的狀況以下：

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

2，16進制顏色代碼縮寫

# Bad    
.color{#ff0000;}
# Good
.color{#f00;}

3，連字符CSS選擇器命名規範

1>.長名稱或詞組可使用中橫線來爲選擇器命名。 2>.使用有意義的字母組合爲選擇器命名 3>.避免過分任意的簡寫。.btn 表明 button，可是 .s 不能表達任何意思。

4,不要隨意使用Id id在JS是惟一的，不能屢次使用，而使用class類選擇器卻能夠重複使用，另外id的優先級優先與class，因此id應該按需使用，而不能濫用。

5，將同一區塊的樣式寫在一塊兒，方便後期查找修改。

.video_file{position: relative;display: inline-block;width:100%;height:180px;}
        .video_file .video_img,.video_file video{position:absolute;left:0;top:0;right:0;bottom:0;width: 100%;height: 100%;    transform: translate(0,0);-webkit-transform: translate(0,0);}
        .video_file .video_img{z-index: 10;}
        .video_file video{z-index:8;}
        .video_file button{background: url(http://static.kaiba315.com/video_bg.png) no-repeat;background-size: 100%;position: absolute;left: 50%;top:50%;width:3rem ;height:3rem ;margin-left:-1.5rem;margin-top: -1.5rem;text-indent: -999px;z-index: 99;border: none;}

6，媒體查詢（Media query）的位置 將媒體查詢放在儘量相關規則的附近。不要將他們打包放在一個單同樣式文件中或者放在文檔底部。若是你把他們分開了，未來只會被你們遺忘。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

7，帶前綴的屬性 當使用特定廠商的帶有前綴的屬性時，經過縮進的方式，讓每一個屬性的值在垂直方向對齊，這樣便於多行編輯。

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

8,註釋 代碼是由人編寫並維護的。請確保你的代碼可以自描述、註釋良好而且易於他人理解。好的代碼註釋可以傳達上下文關係和代碼目的。不要簡單地重申組件或 class 名稱。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}