Web前端規範--CSS規範

一、 從外部文件加載CSS，儘量減小文件數。加載標籤必須放在文件的head 部分。

二、 用 link 標籤加載，不要用@import加載樣式表。

三、 定義樣式的時候，對樣式在頁面只出現一次的元素用id，其餘的用class。

四、 每一個樣式屬性後加 ";"

五、合併margin、padding、border的設置，儘可能使用縮寫法，好比margin:0 10px 0 10px;

六、若是沒有邊框時，不要寫成 border:0，應該寫成 border:none。

七、使用text-indent來隱藏文本內容。

八、書寫順序：

位置屬性(position, top, right, z-index, display, float等)

大小(width, height, padding, margin)

文字系列(font, line-height, letter-spacing, color- text-align等)

背景(background, border等)

其餘(animation, transition等)

九、 　去掉小數點前的「0」 。好比：

padding-left:.8em;

十、 儘可能不縮寫，除非一看就明白的單詞。

十一、 一概小寫。

十二、CSS樣式表文件命名

　　主要的 master.css

　　模塊 module.css

　　基本共用 base.css

　　佈局、版面 layout.css

　　主題 themes.css

　　專欄 columns.css

　　文字 font.css

　　表單 forms.css

　　補丁 mend.css

　　打印 print.css

1三、不要在html 中加入標籤來清除浮動，經過在浮動元素的父元素上添加.clearfix 來清除浮動：

.clearfix:dfter{content:」.」; display:block;height:0;visibility:hidden;clear:both;}.clearfix{zoom:1}

1四、不須要重複定義可繼承的值，css中，子元素自動繼承父元素的屬性值，如顏色、字體等，已經在父元素中定義過的，在子元素中能夠直接繼承，不須要重複定義，除非是爲了更變當前元素樣式不使用父元素的屬性值。

1五、 禁止將樣式寫爲單行 。 每一個聲明換行。

1六、 讓規則越具體越好。儘可能不要使用 ul li a 這樣長的選擇符，最好使用 .list-anchor 之類的選擇符。

1七、 屬性名的冒號後使用一個空格。出於一致性的緣由，屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。

1八、 每一個選擇器和屬性聲明老是使用新的一行。 如：

h1,
    h2,
    h3 {
      font-weight: normal;
      line-height: 1.2;
    }

1九、 屬性選擇器或屬性值用雙引號（」」），而不是單引號（」）括起來。URI值（url()）不要使用引號。

20、字體名稱最好映射成對應的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑(Microsoft Yahei)。