完整PDF下載鏈接：《人人FED CSS編碼規(guī)范》

瀏覽器特效支持規(guī)范

為了頁面性能考慮，如果瀏覽器不支持CSS3相關(guān)屬性的，則該瀏覽器的某些特效將不再支持，屬性的支持情況如下表所示：

文件相關(guān)規(guī)范

1. 1、文件名必須由小寫字母、數(shù)字、中劃線-組成
2. 2、文件必須用utf-8編碼
3. 3、文件引入可通過外聯(lián)或內(nèi)聯(lián)方式引入：
4. 1. 3.1 外聯(lián)方式：<link rel=”stylesheet” href=”…” />（類型聲明type=”text/css”可以忽略）
   2. 3.2 內(nèi)聯(lián)方式：<style>…</style> （類型聲明type=”text/css”可以忽略）
5. 4、原則上，不允許在html上直接寫樣式
6. 5、link和style標簽都應(yīng)該放入head中

注釋規(guī)范

1. 1、文件頂部注釋（推薦使用）

   1 2 3 4 5

   /* * @description: xxxxx中文說明 * @author: zhifu.wang * @update: zhifu.wang (2012-10-17 18:32) */

2. 2、模塊注釋（推薦使用）

   1 2 3

   /* module: module1 by zhifu.wang */ … /* module: module2 by zhifu.wang */

   模塊注釋必須單獨寫在一行

3. 3、簡單注釋
   1. 3.1 單行注釋

      1	/* this is a short comment */

      單行注釋可以寫在單獨一行，也可以寫在行尾

   2. 3.2 多行注釋

      1 2 3 4

      /* * this is comment line 1. * this is comment line 2. */

      多行注釋必須寫在單獨行內(nèi)

4. 4、特殊注釋（推薦使用）

   1 2	/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */ /* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */

   用于標注修改、待辦等信息

5. 5、長度要求：注釋中的每一行長度不超過40個漢字，或者80個英文字符

排版規(guī)范

1. 1、一個tab設(shè)置為四個空格寬度。
2. 2、規(guī)則可以寫成單行，或者多行，但是整個文件內(nèi)的規(guī)則排版必須統(tǒng)一。如果是在html中寫內(nèi)聯(lián)的css，則必須寫成單行。
3. 3、單行形式書寫風(fēng)格的排版約束
4. 1. 3.1 每一條規(guī)則的大括號 { 前后加空格
   2. 3.2 多個selector共用一個樣式集，則多個selector必須寫成多行形式
   3. 3.3 每一條規(guī)則結(jié)束的大括號 } 前加空格
   4. 3.4 屬性名冒號之前不加空格，冒號之后加空格
   5. 3.5 每一個屬性值后必須添加分號; 并且分號后空格
   6. 例如：

      1 2 3

      div.test?{?width:?100px;?height:?200px;?} a:focus, a:hover?{?position:?relative;?right:?1px;?}

5. 4、多行形式書寫風(fēng)格的排版約束
6. 1. 4.1 每一條規(guī)則的大括號 { 前添加空格
   2. 4.2 多個selector共用一個樣式集，則多個selector必須寫成多行形式
   3. 4.3 每一條規(guī)則結(jié)束的大括號 } 必須與規(guī)則選擇器的第一個字符對齊
   4. 4.4 屬性名冒號之前不加空格，冒號之后加空格
   5. 4.5 屬性值之后添加分號;
7. 5、其他規(guī)范
8. 1. 5.1 使用單引號，不允許使用雙引號
   2. 5.2 如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照

   3. 1	-webkit- / -moz- / -ms- / -o- / std

   4. 的順序進行添加，標準屬性寫在最后，并且屬性名稱要對齊，例如：

      1 2 3 4 5 6

      div.animation-demo?{ -webkit-animation:?mymove 5s infinite; -moz-animation:?mymove 5s infinite; -o-animation:?mymove 5s infinite; animation:?mymove 5s infinite; }

規(guī)則書寫規(guī)范

除16進制顏色和字體設(shè)置外，CSS文件中的所有的代碼都應(yīng)該小寫。

規(guī)則書寫規(guī)范

1. 1、規(guī)則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 _
2. 2、命名避免使用中文拼音，應(yīng)該采用更簡明有語義的英文單詞進行組合
3. 3、命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規(guī)則
4. 4、不允許通過1、2、3等序號進行命名
5. 5、避免class與id重名
6. 6、id用于標識模塊或頁面的某一個父容器區(qū)域，名稱必須唯一，不要隨意新建id
7. 7、class用于標識某一個類型的對象，命名必須言簡意賅。
8. 8、盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式
9. 9、規(guī)則名稱中不應(yīng)該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關(guān)的信息。應(yīng)該用意義命名，而不是樣式顯示結(jié)果命名。例如：

   1 2	.red?{?color:?red?}（錯誤） .important-news?{?color?:?red?}（正確）

10. 10、除了重置瀏覽器默認樣式外，禁止直接為html tag添加css樣式設(shè)置，例如：

    1 2 3 4

    div?{ width:?200px; font-size:?16px; }

11. 11、每一條規(guī)則應(yīng)該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設(shè)置屬性

屬性編寫順序

推薦的樣式編寫順序

1. 1、顯示屬性

   1	display/list-style/position/float/clear

2. 2、自身屬性（盒模型）

   1	width/height/margin/padding/border

3. 3、背景

   1	background

4. 4、行高

   1	line-height

5. 5、文本屬性

1. 6、其他

   1	cursor/z-index/zoom

2. 7、CSS3屬性

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

3. 8、鏈接的樣式請嚴格按照如下順序添加：

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

性能優(yōu)化

1. 1、合并margin、padding、border的-left/-top/-right/-bottom的設(shè)置，盡量使用短名稱。
2. 2、選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置。
3. 3、注意選擇器的性能，不要使用低性能的選擇器，例如：

   1 2 3

   div?>?*?{} ul?>?li?>?a?{} body.profile?ul.tabs.nav?li a?{}

4. 4、禁止在css中使用*選擇符
5. 5、除非必須，否則，一般有class或id的，不需要再寫上元素對應(yīng)的tag，例如：

   1	div#test?{?width:?100px;?}

6. 6、0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px
7. 7、如果是16進制表示顏色，則顏色取值應(yīng)該大寫。
8. 8、如果可以，顏色盡量用三位字符表示，例如#AABBCC寫成#ABC
9. 9、如果沒有邊框時，不要寫成border:0，應(yīng)該寫成border:none
10. 10、盡量避免使用AlphaImageLoader
11. 11、在保持代碼解耦的前提下，盡量合并重復(fù)的樣式，例如：

    1 2 3 4 5

    h1?{?color:?black;?} p?{?color:?black;?} –> h1, p?{?color:?black;?}

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

    1 2	background:?color?image?repeat?attachment?position; font:?style weight?size/lineHeight family;

CSS屬性取值規(guī)范

字體大小font-size

font-size目前人人CSS取值的幾種類型如下：

現(xiàn)將font-size取值的單位類型約束如下：

1. 1、font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設(shè)置）
2. 2、不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值

字體系列font-family

目前font-family取值類型豐富多樣，比如home-frame2-all-min.css中：

為了對font-family取值進行統(tǒng)一，更好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性，現(xiàn)將font-family統(tǒng)一約束如下：

1. 1、font-family不允許在業(yè)務(wù)代碼中隨意設(shè)置
2. 2、font-family目前取值為

hack使用規(guī)范

重要原則：盡量少用hack，能不hack堅決不hack，不允許濫用hack。

如果需要使用hack，請參考以下hack方式：

區(qū)分規(guī)則

區(qū)分屬性

z-index取值規(guī)范

目前人人頁面中的彈層較多，z-index取值也比較隨意，導(dǎo)致相互覆蓋的情況，有的彈層直接覆蓋了頂部導(dǎo)航條。

以下是首頁的一些z-index取值比較大的屬性設(shè)置統(tǒng)計：

其他z-index設(shè)置：

這些z-index設(shè)置，極有可能造成相互覆蓋，存在潛在的問題風(fēng)險。例如：

1. 1、publisher在導(dǎo)航條以下，但是在publisher中彈出的@、表情卻在導(dǎo)航條以上。
   
2. 2、XN的默認彈層樣式穿透導(dǎo)航條
   
3. 3、@組件與名片卡組件相互重疊
   

因此，有必要對z-index取值進行規(guī)范和約束。避免前端開發(fā)人員為了自己開發(fā)的功能能夠正確展示，而忽略了其他組件的展示需求。

如果要為彈層設(shè)置z-index，請務(wù)必按照給定的取值區(qū)間來進行設(shè)置。

這里只是初稿，可能還需要精確到某一個組件的z-index分配，需要大家集思廣益（可以參考cookie的設(shè)置流程，在使用z-index時必須經(jīng)過審批）

常用的 CSS 命名

其他

1. 1、字體名稱請映射成對應(yīng)的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei)，如果字體名稱中有空格，則必須加單引號。
2. 2、背景圖片請合理使用csssprites，按照模塊、業(yè)務(wù)、頁面來劃分均可
3. 3、css背景圖片的文件類型，請按照以下原則來保存：
   1. 3.1 如果背景圖片有動畫，則保存成gif
   2. 3.2 如果沒有動畫，也沒有半透明效果，則保存成png-8
   3. 3.3 如果有半透明效果，則保存成png-24
4. 4、不要在html中加入標簽來清理浮動，通過在浮動元素的父元素上添加.clearfix來清除浮動
5. 5、為了SEO和頁面可用性，請使用text-indent來隱藏文本內(nèi)容。
6. 6、制作csssprites時，盡量把顏色相近的圖標放在一起，存儲為png8格式，存儲完以后還能用一些壓縮工具進行無損壓縮。
7. 7、避免過小的背景圖片平鋪。
8. 8、盡量少用!important
9. 9、避免使用非一次性expression

參考資料

瀏覽器CSS3特效支持規(guī)范
http://www.w3schools.com/cssref/css3_browsersupport.asp

Google CSS guidelines
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#CSS_Style_Rules

Mozilla官方推薦CSS書寫順序
http://www.mozilla.org/css/base/content.css

bootstrap.css
http://twitter.github.com/bootstrap/assets/css/bootstrap.css

瀏覽器兼容性問題匯總
http://wiki.d.xiaonei.com/pages/viewpage.action?pageId=16090142

CSS hack區(qū)分Firefox、Opera、Safari、IE
http://leeiio.me/css-hack-for-firefox-opera-safari-ie/

說說CSS Hack 和向后兼容
http://sofish.de/1331

常用的css命名
http://www.03964.com/read/bbfd0a70fc1602583e1038d7.html

來源：人人網(wǎng)FED