[轉]CSS編碼規範

單行形式書寫風格的排版限制

1.      每一條規則的大括号 { 前後加空格

2.      多個selector共用一個樣式集，則多個selector必須寫成多行形式

3.      每一條規則結束的大括号 } 前加空格

4.      屬性名冒号之前不加空格，冒号之後加空格

5.      每一個屬性值後必須添加分号; 并且分号後空格

例如：

div.test { width: 100px; height: 200px; }

a:focus,

a:hover { position: relative; right: 1px; }

多行形式書寫風格的排版限制

1.      每一條規則的大括号 { 前添加空格

3.      每一條規則結束的大括号 } 必須與規則選擇器的第一個字元對齊

5.      屬性值之後添加分号;

其他規範

1.      使用單引号，不允許使用雙引号

2.      如果使用CSS3的屬性，如果有必要加入浏覽器字首，則按照webkit- / -moz- / -ms- / -o- / std的順序進行添加，标準屬性寫在最後，并且屬性名稱要對齊，例如：

div.animation-demo {

    -webkit-animation: mymove 5s infinite;

        -moz-animation: mymove 5s infinite;

            -o-animation: mymove 5s infinite;

                 animation: mymove 5s infinite;

} 

命名規則書寫規範

1、規則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 _

2、命名避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合

3、命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則

4、不允許通過1、2、3等序号進行命名

5、避免class與id重名

6、id用于辨別子產品或頁面的某一個父容器區域，名稱必須唯一，不要随意建立id

7、class用于辨別某一個類型的對象，命名必須言簡意赅。

8、盡可能提高代碼子產品的複用，樣式盡量用組合的方式

9、規則名稱中不應該包含顔色（red/blue）、定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名。

10、除了重置浏覽器預設樣式外，禁止直接為html tag添加css樣式設定，例如：

div {

    width: 200px;

    font-size: 16px;

}

11、每一條規則應該確定選擇器唯一，禁止直接為全局.nav/.header/.body等類設定屬性

屬性編寫順序

推薦的樣式編寫順序

1、顯示屬性

display/list-style/position/float/clear

2、自身屬性（盒模型）

width/height/margin/padding/border

3、背景

background

4、行高

line-height

5、文本屬性

color/font/text-decoration/text-align/

text-indent/vertical-align/white-space/content

6、其他

cursor/z-index/zoom

7、CSS3屬性

transform/transition/animation/box-shadow/border-radius

8、連結的樣式請嚴格按照如下順序添加：

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

性能優化

1.      選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆寫全局樣式設定。

2.      注意選擇器的性能，不要使用低性能的選擇器，例如：

div > * {}

ul > li > a {}

body.profile ul.tabs.nav li a {}

3.      禁止在css中使用*選擇符

4.      除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag，例如：

div#test { width: 100px; }

5.      0後面不需要機關，比如0px可以省略成0，0.8px可以省略成.8px

6.      如果是16進制表示顔色，則顔色取值應該大寫。

7.      如果可以，顔色盡量用三位字元表示，例如#AABBCC寫成#ABC

8.      如果沒有邊框時，不要寫成border:0，應該寫成border:none

9.      盡量避免使用AlphaImageLoader

10.    在保持代碼解耦的前提下，盡量合并重複的樣式

11.    background、font等可以縮寫的屬性，盡量使用縮寫形式

hack

IE6   * html selector { … }

IE7   *+html selector { … }

非IE6      html>body selector { … }

firefox     @-moz-document url-prefix() { … }

safari3+/chrome    @media screen and (-webkit-min-device-pixel-ratio:0) { … }

opera     @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { … }

iPhone/mobile webkit   @media screen and (max-device-width: 480px) { … }

z-index取值規範

頭部導航區域

[1999 - 2100]

publisher所在的内容head區

[1998]

頁面主要内容區域

[-1 - 1997]

頁面底部

首頁應用彈層

[1000]

全站公共元件

[-1 - 1999]

全頁面蒙層彈窗元件

[10000-11000]

其他

1、字型名稱請映射成對應的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei)，如果字型名稱中有空格，則必須加單引号。

2、背景圖檔請合理使用csssprites，按照子產品、業務、頁面來劃分均可

3、css背景圖檔的檔案類型，請按照以下原則來儲存：

3.1 如果背景圖檔有動畫，則儲存成gif

3.2 如果沒有動畫，也沒有半透明效果，則儲存成png-8

3.3 如果有半透明效果，則儲存成png-24

4、不要在html中加入标簽來清理浮動，通過在浮動元素的父元素上添加.clearfix來清除浮動

5、為了SEO和頁面可用性，請使用text-indent來隐藏文本内容。

6、制作css sprites時，盡量把顔色相近的圖示放在一起，存儲為png8格式，存儲完以後還能用一些壓縮工具進行無損壓縮。

7、避免過小的背景圖檔平鋪。

8、盡量少用!important

9、避免使用非一次性expression