文章整理了Web前端開發(fā)中的各種CSS規(guī)范辰妙，包括文件規(guī)范、注釋規(guī)范甫窟、命名規(guī)范密浑、書寫規(guī)范、測試規(guī)范等粗井。

一尔破、文件規(guī)范

1、文件均歸檔至約定的目錄中浇衬。

所有的CSS分為兩大類：通用類和業(yè)務(wù)類懒构。

通用的CSS文件，放在如下目錄中：

基本樣式庫 /css/core

通用UI元素樣式庫 /css/lib

JS組件相關(guān)樣式庫 /css/ui

業(yè)務(wù)類的CSS是指和具體產(chǎn)品相關(guān)的文件耘擂，放在如下目錄中：

讀書 /css/book/

電影 /css/movie/

音樂 /css/music/

社區(qū) /css/sns/

小站 /css/site/

同城 /css/location/

電臺 /css/radio/

外聯(lián)CSS文件適用于全站級和產(chǎn)品級通用的大文件胆剧。內(nèi)聯(lián)CSS文件適用于在一個或幾個頁面共用的CSS。另外一對具體的CSS進(jìn)行文檔化的整理醉冤。如：

- util-01 reset /css/core/reset.css

- util-02 通用模塊容器 /css/core/mod.css

- ui-01. 喜歡按鈕 /css/core/fav_btn.css

- ui-02. 視頻/相冊列表項(xiàng) /css/core/media_item.css

- ui-03. 評星 /css/core/rating.css

- ui-04. 通用按鈕 /css/core/common_button.css

- ui-05. 分頁 /css/core/pagination.css

- ui-06. 推薦按鈕 /css/core/rec_btn.css

- ui-07. 老版對話框 /css/core/old_dialog.css

- ui-08. 老版Tab /css/core/old_tab.css

- ui-09. 老版成員列表 /css/core/old_userlist.css

- ui-10. 老版信息區(qū) /css/core/notify.css

- ui-11. 社區(qū)用戶導(dǎo)航 /css/core/profile_nav.css

- ui-12. 當(dāng)前大社區(qū)導(dǎo)航 /css/core/site_nav.css

- ui-13. 加載中 /css/lib/loading.css

主要的 master.css

模塊 module.css

基本共用 base.css

布局秩霍，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

2、文件引入可通過外聯(lián)或內(nèi)聯(lián)方式引入蚁阳。

- 外聯(lián)方式：（類型聲明type=”text/css”可以省略）

- 內(nèi)聯(lián)方式： （類型聲明type=”text/css”可以省略）

link和style標(biāo)簽都應(yīng)該放入head中铃绒，原則上，不允許在html上直接寫樣式螺捐。避免在CSS中使用@import颠悬，嵌套不要超過一層矮燎。

3、文件名赔癌、文件編碼及文件大小

- 文件名必須由小寫字母诞外、數(shù)字、中劃線組成

- 文件必須用UTF-8編碼灾票，使用UTF-8（非BOM）峡谊，在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因?yàn)槟J(rèn)就是UTF-8铝条。

- 單個CSS文件避免過大（建議少于300行）

二靖苇、注釋規(guī)范

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

- /*

- * @description: 中文說明

- * @author: name

- * @update: name (2013-04-13 18:32)

- */

復(fù)制代碼2班缰、模塊注釋

- /* module: module1 by 張三 */

- …

- /* module: module2 by 張三 */

復(fù)制代碼模塊注釋必須單獨(dú)寫在一行

3贤壁、 單行注釋與多行注釋

/* this is a short comment

*/單行注釋可以寫在單獨(dú)一行，也可以寫在行尾埠忘，注釋中的每一行長度不超過40個漢字脾拆，或者80個英文字符。/*

* this is comment line 1.

* this is comment line 2.

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

4莹妒、特殊注釋

/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx by name

2012-04-13 18:32 */用于標(biāo)注修改名船、待辦等信息

5、區(qū)塊注釋

- /* Header */

- /* Footer */

- /* Gallery */

復(fù)制代碼對一個代碼區(qū)塊注釋（可選）旨怠，將樣式語句分區(qū)塊并在新行中對其注釋渠驼。

三、命名規(guī)范

使用有意義的或通用的ID和class命名：ID和class的命名應(yīng)反映該元素的功能或使用通用名稱鉴腻，而不要用抽象的晦澀的命名迷扇。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義爽哎，與其同級元素?zé)o異蜓席，通常是用于輔助命名；使用功能性或通用的名稱可以更適用于文檔或模版變化的情況课锌。

- /* 不推薦: 無意義 */ #yee-1901 {}

- /* 不推薦: 與樣式相關(guān) */ .button-green {}.clear {}

- /* 推薦: 特殊性 */ #gallery {}#login {}.video {}

- /* 推薦: 通用性 */ .aux {}.alt {}

常用命名（多記多查英文單詞）：

page厨内、wrap、layout渺贤、header(head)雏胃、footer(foot、ft)癣亚、

content(cont)丑掺、menu、nav述雾、main街州、submain、sidebar(side)玻孟、logo唆缴、banner、

title(tit)黍翎、popo(pop)面徽、icon、note匣掸、btn趟紊、txt、iblock碰酝、window(win)霎匈、tips等

ID和class命名越簡短越好，只要足夠表達(dá)涵義送爸。這樣既有助于理解铛嘱，也能提高代碼效率。

- /* 不推薦 */ #navigation {}.atr {}

- /* 推薦 */ #nav {}.author {}

類型選擇器避免同時使用標(biāo)簽袭厂、ID和class作為定位一個元素選擇器墨吓；從性能上考慮也應(yīng)盡量減少選擇器的層級。

- /* 不推薦 */ul#example {}div.error {}

- /* 推薦 */#example {}.error {}

命名時需要注意的點(diǎn)：

- 規(guī)則命名中纹磺，一律采用小寫加中劃線的方式帖烘，不允許使用大寫字母或 _

- 命名避免使用中文拼音，應(yīng)該采用更簡明有語義的英文單詞進(jìn)行組合

- 命名注意縮寫橄杨，但是不能盲目縮寫秘症，具體請參見常用的CSS命名規(guī)則

- 不允許通過1、2讥珍、3等序號進(jìn)行命名

- 避免class與id重名

- id用于標(biāo)識模塊或頁面的某一個父容器區(qū)域历极，名稱必須唯一，不要隨意新建id

- class用于標(biāo)識某一個類型的對象衷佃，命名必須言簡意賅趟卸。

- 盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式

-規(guī)則名稱中不應(yīng)該包含顏色（red/blue）氏义、定位（left/right）等與具體顯示效果相關(guān)的信息锄列。應(yīng)該用意義命名，而不是樣式顯示結(jié)果命名惯悠。

1邻邮、常用id的命名：

(1)頁面結(jié)構(gòu)

- 容器: container

- 頁頭：header

- 內(nèi)容：content/container

- 頁面主體：main

- 頁尾：footer

- 導(dǎo)航：nav

- 側(cè)欄：sidebar

- 欄目：column

- 頁面外圍控制整體布局寬度：wrapper

- 左右中：left right center

(2)導(dǎo)航

- 導(dǎo)航：nav

- 主導(dǎo)航：mainbav

- 子導(dǎo)航：subnav

- 頂導(dǎo)航：topnav

- 邊導(dǎo)航：sidebar

- 左導(dǎo)航：leftsidebar

- 右導(dǎo)航：rightsidebar

- 菜單：menu

- 子菜單：submenu

- 標(biāo)題: title

- 摘要: summary

(3)功能

- 標(biāo)志：logo

- 廣告：banner

- 登陸：login

- 登錄條：loginbar

- 注冊：regsiter

- 搜索：search

- 功能區(qū)：shop

- 標(biāo)題：title

- 加入：joinus

- 狀態(tài)：status

- 按鈕：btn

- 滾動：scroll

- 標(biāo)簽頁：tab

- 文章列表：list

- 提示信息：msg

- 當(dāng)前的: current

- 小技巧：tips

- 圖標(biāo): icon

- 注釋：note

- 指南：guild

- 服務(wù)：service

- 熱點(diǎn)：hot

- 新聞：news

- 下載：download

- 投票：vote

- 合作伙伴：partner

- 友情鏈接：link

- 版權(quán)：copyright

2.常用css命名

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁面主體：main

熱點(diǎn)：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權(quán)：copyright

滾動：scroll

內(nèi)容：content

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guide

服務(wù)：service

注冊：register

狀態(tài)：status

投票：vote

合作伙伴：partner

3.class的命名

（1）顏色：

使用顏色的名稱或者16進(jìn)制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）字體大小：

直接使用”font+字體大小”作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標(biāo)題欄樣式,使用”類別+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事項(xiàng)：

一律小寫;

盡量用英文;

不加中杠和下劃線;

盡量不縮寫克婶，除非一看就明白的單詞.

四筒严、書寫規(guī)范

1丹泉、排版規(guī)范

(1)使用4個空格，而不使用tab或者混用空格+tab作為縮進(jìn)鸭蛙；

(2)規(guī)則可以寫成單行摹恨，或者多行，但是整個文件內(nèi)的規(guī)則排版必須統(tǒng)一娶视；

單行形式書寫風(fēng)格的排版約束

- 如果是在html中寫內(nèi)聯(lián)的css晒哄，則必須寫成單行；

- 每一條規(guī)則的大括號 { 前后加空格 肪获；

- 每一條規(guī)則結(jié)束的大括號 } 前加空格寝凌；

- 屬性名冒號之前不加空格，冒號之后加空格孝赫；

- 每一個屬性值后必須添加分號; 并且分號后空格较木；

- 多個selector共用一個樣式集，則多個selector必須寫成多行形式 寒锚；

多行形式書寫風(fēng)格的排版約束

- 每一條規(guī)則的大括號 { 前添加空格;

- 多個selector共用一個樣式集劫映，則多個selector必須寫成多行形式 ;

- 每一條規(guī)則結(jié)束的大括號 } 必須與規(guī)則選擇器的第一個字符對齊 ;

- 屬性名冒號之前不加空格，冒號之后加空格;

- 屬性值之后添加分號;

2刹前、屬性編寫順序

- 顯示屬性：display/list-style/position/float/clear …

- 自身屬性（盒模型）：width/height/margin/padding/border

- 背景：background

- 行高：line-height

-文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

- 其他：cursor/z-index/zoom/overflow

- CSS3屬性：transform/transition/animation/box-shadow/border-radius

- 如果使用CSS3的屬性泳赋，如果有必要加入瀏覽器前綴，則按照 -webkit- / -moz- / -ms- / -o- /

std的順序進(jìn)行添加喇喉，標(biāo)準(zhǔn)屬性寫在最后祖今。

- 鏈接的樣式請嚴(yán)格按照如下順序添加： a:link -> a:visited -> a:hover -> a:active

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

- 使用單引號拣技，不允許使用雙引號;

- 每個聲明結(jié)束都應(yīng)該帶一個分號千诬，不管是不是最后一個聲明;

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

- 除了重置瀏覽器默認(rèn)樣式外踊东，禁止直接為html tag添加css樣式設(shè)置;

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

4谁帕、代碼性能優(yōu)化

- 合并margin、padding萨惑、border的-left/-top/-right/-bottom的設(shè)置隔心，盡量使用短名稱掠剑。

- 選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡短沮榜，減少選擇器嵌套盘榨，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置蟆融。

- 注意選擇器的性能草巡，不要使用低性能的選擇器。

- 禁止在css中使用*選擇符型酥。

- 除非必須山憨，否則查乒，一般有class或id的，不需要再寫上元素對應(yīng)的tag萍歉。

- 0后面不需要單位侣颂，比如0px可以省略成0档桃，0.8px可以省略成.8px枪孩。

- 如果是16進(jìn)制表示顏色，則顏色取值應(yīng)該大寫藻肄。

- 如果可以蔑舞，顏色盡量用三位字符表示，例如#AABBCC寫成#ABC 嘹屯。

- 如果沒有邊框時攻询，不要寫成border:0，應(yīng)該寫成border:none 州弟。

- 盡量避免使用AlphaImageLoader 钧栖。

- 在保持代碼解耦的前提下，盡量合并重復(fù)的樣式婆翔。

- background拯杠、font等可以縮寫的屬性，盡量使用縮寫形式 啃奴。

5潭陪、CSS Hack的使用

請不用動不動就使用瀏覽器檢測和CSS Hacks，先試試別的解決方法吧最蕾！考慮到代碼高效率和易管理依溯，雖然這兩種方法能快速解決瀏覽器解析差異，但應(yīng)被視為最后的手段瘟则。在長期的項(xiàng)目中黎炉，允許使用hack只會帶來更多的hack，你越是使用它醋拧，你越是會依賴它慷嗜！

6、字體規(guī)則

- 為了防止文件合并及編碼轉(zhuǎn)換時造成問題趁仙，建議將樣式中文字體名字改成對應(yīng)的英文名字洪添，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑(Microsoft Yahei，幾個單詞中間有空格組成的必須加引號)

- 字體粗細(xì)采用具體數(shù)值雀费，粗體bold寫為700干奢，正常normal寫為400

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

- 為了對font-family取值進(jìn)行統(tǒng)一忿峻，更好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性薄啥，font-family不允許在業(yè)務(wù)代碼中隨意設(shè)置

五、其他規(guī)范

- 不要輕易改動全站級CSS和通用CSS庫逛尚。改動后垄惧，要經(jīng)過全面測試。

- 避免使用filter

- 避免在CSS中使用expression

- 避免過小的背景圖片平鋪绰寞。

- 盡量不要在CSS中使用!important

- 絕對不要在CSS中使用”*”選擇符

-層級(z-index)必須清晰明確到逊，頁面彈窗、氣泡為最高級（最高級為999）滤钱，不同彈窗氣泡之間可在三位數(shù)之間調(diào)整觉壶；普通區(qū)塊為10-90內(nèi)10的倍數(shù)；區(qū)塊展開件缸、彈出為當(dāng)前父層級上個位增加铜靶，禁止層級間盲目攀比。

- 背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按照模塊他炊、業(yè)務(wù)争剿、頁面來劃分均可。

六痊末、測試規(guī)范

1蚕苇、了解瀏覽器特效支持為了頁面性能考慮，如果瀏覽器不支持CSS3相關(guān)屬性的舌胶，則該瀏覽器的某些特效將不再支持捆蜀。

2、 設(shè)定瀏覽器支持標(biāo)準(zhǔn)

- A級－交互和視覺完全符全設(shè)計的要求

- B級－視覺上允許有所差異幔嫂，但不破壞頁面的整體效果

- C級－可忽略設(shè)計上的細(xì)節(jié)辆它，但不防礙使用

3、常用樣式測試工具

W3C CSS validator：http://jigsaw.w3.org/css-validator/

CSS Lint：http://csslint.net/

CSS Usage：https://addons.mozilla.org/en-us/firefox/addon/css-usage/

原文鏈接：http://www.86y.org/art_detail.aspx?id=740

附錄：

1.文件命名

head.asp 頭文件

foot.asp 底文件

index.asp 首頁文件

sort.html 分類嵌套文件

article_channel.asp 文章_頻道頁

article_list.asp 文章_列表頁

article_detail.asp 文章_顯示頁

注明：如果有多個文章頻道履恩，則用article01锰茉， article02，article03等等

exhibit_channel.asp 展會信息_頻道頁

exhibit_list.asp 展會信息_列表頁

exhibit_detail.asp 展會信息_顯示頁

product_channel.asp 產(chǎn)品中心_頻道頁

product_list.asp 產(chǎn)品中心_列表頁

prodect_detail.asp 產(chǎn)品中心_顯示頁

corporation_channel.asp 會員_頻道頁

corporation_list.asp 會員_列表頁

corporation_detail.asp 會員_顯示頁

information_channel.asp 商機(jī)信息_頻道頁

information_list.asp 商機(jī)信息_列表頁

information_detail.asp 商機(jī)信息_顯示頁

job_channel.asp 招聘_頻道頁

job_list.asp 招聘_列表頁

job_detail.asp 招聘_顯示頁

hr_channel.asp 求職_頻道頁

hr_list.asp 求職_列表頁

hr_detail.asp 求職_顯示頁

job_hr_channel.asp 人才中心_頻道頁

job_hr_lisr.asp 人才中心_列表頁

job_hr_detail.asp 人才中心顯示頁

copyright.asp 版權(quán)頁

2.圖片命名

導(dǎo)航命名：menu.gif 如：menubg .gif（導(dǎo)航的背景圖）

會員登錄：login.gif 如：loginbg.gif （會員登陸的背景圖）

搜索命名：search.gif 如：search_bg.gif （搜索的背景圖）

小 圖 標(biāo)：ico_數(shù)字.gif 如：ico_001.gif

線的命名：line_X_顏色.gif 如：line_X_red.gif（紅色橫向虛線）說明：line只命名虛線

line_Y_red.gif（紅色縱向虛線）

廣告命名：ad_數(shù)字.gif 如：ad001.gif

其它欄目的圖片：以欄目名的第一個字母.gif

如：xwzx_bg.gif （新聞中心背景） cpzx_l.gif （產(chǎn)品中心的左邊圖）

產(chǎn)品與欄目熱點(diǎn)圖片： pic_數(shù)字.gif 如：pic_001.gif

說明：上切心、下飒筑、左、右 可以縮寫為T绽昏、B协屡、L、R

3.相對于網(wǎng)頁外層重要部分css命名

外套 wrap ------------------用于最外層

頭部 header ----------------用于頭部

主要內(nèi)容 main ------------用于主體內(nèi)容（中部）

左側(cè) main-left -------------左側(cè)布局

右側(cè) main-right -----------右側(cè)布局

導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條

內(nèi)容 content ---------------用于網(wǎng)頁中部主體

底部 footer -----------------用于底部

4.網(wǎng)頁公共命名

#wrapper頁面外圍控制整體布局寬度

#container或#content容器,用于最外層

#layout布局

#head, #header頁頭部分

#foot, #footer頁腳部分

#nav主導(dǎo)航

#subnav二級導(dǎo)航

#menu菜單

#submenu子菜單

#sideBar側(cè)欄

#sidebar_a, #sidebar_b左邊欄或右邊欄

#main頁面主體

#tag標(biāo)簽

#msg #message提示信息

#tips小技巧

#vote投票

#friendlink友情連接

#title標(biāo)題

#summary摘要

#loginbar登錄條

#searchInput搜索輸入框

#hot熱門熱點(diǎn)

#search搜索

#search_output搜索輸出和搜索結(jié)果相似

#searchBar搜索條

#search_results搜索結(jié)果

#copyright版權(quán)信息

#branding商標(biāo)

#logo網(wǎng)站LOGO標(biāo)志

#siteinfo網(wǎng)站信息

#siteinfoLegal法律聲明

#siteinfoCredits信譽(yù)

#joinus加入我們

#partner合作伙伴

#service服務(wù)

#regsiter注冊

arr/arrow箭頭

#guild指南

#sitemap網(wǎng)站地圖

#list列表

#homepage首頁

#subpage二級頁面子頁面

#tool, #toolbar工具條

#drop下拉

#dorpmenu下拉菜單

#status狀態(tài)

#scroll滾動

.tab標(biāo)簽頁

.left .right .center居左全谤、中肤晓、右

.news新聞

.download下載

.banner廣告條(頂部廣告條)

5.電子貿(mào)易相關(guān)

.products產(chǎn)品

.products_prices產(chǎn)品價格

.products_description產(chǎn)品描述

.products_review產(chǎn)品評論

.editor_review編輯評論

.news_release最新產(chǎn)品

.publisher生產(chǎn)商

.screenshot縮略圖

.faqs常見問題

.keyword關(guān)鍵詞

.blog博客

.forum論壇

6.常用文件命名

master.css,style.css主要的

module.css模塊

base.css基本共用

layout.css布局，版面

themes.css主題

columns.css專欄

font.css文字、字體

forms.css表單

mend.css補(bǔ)丁

print.css打印