CSS規範

前面的話

　　CSS是網頁樣式的描述語言，CSS規範可以使CSS代碼風格保持一致，使得CSS更容易理解和維護。本文將詳細介紹CSS規範

 

代碼風格

【選擇器】

　　一、選擇器 與 { 之間包含空格

.selector {}

　　二、>、+、~ 選擇器的兩邊各保留一個空格

/* good */
main > nav{}
/* bad */
main>nav {}

【屬性風格】

　　一、屬性名 與以後的 : 之間不包含空格， : 與 屬性值 之間包含空格

margin: 0;

　　二、對於以逗號分隔的屬性值，每一個逗號後面都應該插入一個空格

font-family: Arial, sans-serif;

　　三、對於只包含一條聲明的樣式，爲了易讀性和便於快速編輯，建議將語句放在同一行。對於帶有多條聲明的樣式，應當將聲明分爲多行

.selector {
    margin: 0;
    padding: 0;
}
.selector { margin: 0;}

 　　四、最後一個屬性值也以分號結尾，這樣能夠減小修改、添加和維護代碼時沒必要要的失誤和麻煩

/* good */
.selector {
    margin: 0;
    padding: 0;
}
/* bad */
.selector {
    margin: 0;
    padding: 0
}

【引號】

　　一、文本內容用雙引號包圍

html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "「";
}

　　二、url() 函數中的路徑不加引號

body {background: url(bg.png);}

【省略】

　　一、對於屬性值或顏色參數，省略小於 1 的小數前面的 0 

panel {opacity: .8}

　　二、省略值爲0時的單位，爲節省沒必要要的字節同時也使閱讀方便，將0px、0em、0%等值縮寫爲0

.m-box{margin:0 10px;background-position:50% 0;}

【縮寫】

　　一、儘可能使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff

　　二、十六進制值應該所有小寫，例如，#fff。在掃描文檔時，小寫字符易於分辨，由於他們的形式更易於區分

　　三、在能夠使用縮寫的狀況下，儘可能使用屬性縮寫，它最大的好處就是節省了字節，便於維護，並使閱讀更加一目瞭然

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

【媒體查詢】

　　將媒體查詢@media放在儘量相關規則的附近。不要將它們打包放在一個單同樣式文件中或者放在文檔底部。若是把它們分開了，未來更容易被遺忘

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

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

 

註釋

【單行註釋】

　　星號與內容之間保留一個空格，以確保即便在編碼錯誤的狀況下也能夠正確解析樣式

/* 單行註釋 */

【塊狀註釋】

　　在必要的狀況下，能夠使用塊狀註釋，塊狀註釋保持統一的縮進對齊。星號要一列對齊，星號與內容之間保留一個空格

/**
 * 多行註釋1
 * 多行註釋2
 */

【文件註釋】

　　文件頂部必須包含文件註釋，星號要一列對齊，星號與內容之間保留一個空格，標識符冒號與內容之間保留一個空格

　　用 @name 標識文件說明，@author標識做者，@description爲文件或模塊描述，@update爲可選項，建議每次改動都更新一下

/**
 * @name: 文件名或模塊名
 * @description: 文件或模塊描述
 * @author: author-name(mail-name@qq.com)
 *          author-name2(mail-name2@qq.com)
 * @update: 2017-07-14 00:00
 */

 

聲明順序

　　一、私有在前，標準在後，即先寫帶有瀏覽器私有標誌的，後寫W3C標準的

.m-box {
    -webkit-box-shadow: 0 0 0 #000;
    -moz-box-shadow: 0 0 0 #000;
    box-shadow: 0 0 0 #000;
}

　　二、相關的屬性聲明應當歸爲一組，並按照（佈局類屬性->盒模型屬性->文本類屬性->修飾類屬性）順序排列

　　佈局屬性處在第一位，是由於它能夠使一個元素脫離正常文本流，而且覆蓋盒模型相關的樣式。盒模型緊跟其後，由於它決定了一個組件的大小和位置。其餘屬性只在組件內部起做用或者不會對前面兩種狀況的結果產生影響，因此它們排在後面

佈局類屬性     position / top / right / bottom / left / float / display / overflow 等
盒模型屬性   border / margin / padding / width / height 等
文本類屬性     font / line-height / text-align / word-wrap 等
修飾類屬性     background / color / transition / list-style 等

　　另外，若是包含 content 屬性，應放在最前面

.sidebar {
    /* formatting model */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic */
    font-size: 14px;
    line-height: 20px;

    /* visual */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

 

避免使用

　　一、儘可能不使用 !important 聲明。 當須要強制指定樣式且不容許任何場景覆蓋時，經過標籤內聯和 !important 定義樣式

　　二、避免耗性能的屬性，如express和filter。不過有時候需求大於一切

/* expression */
.class {width: expression(this.width>100?'100px':'auto');}
/* filter */
.class {filter: alpha(opacity=50);}

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

　　四、避免sass中沒必要要的嵌套,這是由於雖然能夠使用嵌套，可是並不意味着應該使用嵌套。只有在必須將樣式限制在父元素內（也就是後代選擇器），而且存在多個須要嵌套的元素時才使用嵌套

　　五、儘可能避免使用hack，因爲瀏覽器自身缺陷，沒法避開的時候，能夠容許使用適當的Hack。統一使用「*」和「_」分別對IE7和6進行Hack

/* IE7會顯示灰色#888，IE6會顯示白色#fff，其餘瀏覽器顯示黑色#000 */
.m-list{
    color:#000;
    *color:#888;
    _color:#fff;
}