製做命名規範

1、文件規範
一、文件均歸檔至約定的目錄中。
具體要求經過豆瓣的CSS規範進行講解：
全部的CSS分爲兩大類：通用類和業務類。通用的CSS文件，放在以下目錄中：
    •    基本樣式庫 /css/core
    •    通用UI元素樣式庫 /css/lib
    •    JS組件相關樣式庫 /css/ui
業務類的CSS是指和具體產品相關的文件，放在以下目錄中：
    •    讀書 /css/book/
    •    電影 /css/movie/
    •    音樂 /css/music/
    •    社區 /css/sns/
    •    小站 /css/site/
    •    同城 /css/location/
    •    電臺 /css/radio/
外聯CSS文件適用於全站級和產品級通用的大文件。內聯CSS文件適用於在一個或幾個頁面共用的CSS。另一對具體的CSS進行文檔化的整理。如：
    •    util-01 reset /css/core/reset.css
    •    util-02 通用模塊容器 /css/core/mod.css
    •    ui-01. 喜歡按鈕 /css/core/fav_btn.css
    •    ui-02. 視頻/相冊列表項 /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. 老版信息區 /css/core/notify.css
    •    ui-11. 社區用戶導航 /css/core/profile_nav.css
    •    ui-12. 當前大社區導航 /css/core/site_nav.css
    •    ui-13. 加載中 /css/lib/loading.css
二、文件引入可經過外聯或內聯方式引入。
    •    外聯方式：（類型聲明type=」text/css」能夠省略）
    •    內聯方式：（類型聲明type=」text/css」能夠省略）
    •    link和style標籤都應該放入head中，原則上，不容許在html上直接寫樣式。避免在CSS中使用@import，嵌套不要超過一層。
三、文件名、文件編碼及文件大小
    •    文件名必須由小寫字母、數字、中劃線組成
    •    文件必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不須要特別指定由於默認就是UTF-8。
    •    單個CSS文件避免過大（建議少於300行）
2、註釋規範
一、文件頂部註釋（推薦使用）
/* * @description: 中文說明 * @author: name * @update: name (2013-04-13 18:32) */
二、模塊註釋
/* module: module1 by 張三 */ … /* module: module2 by 張三 */
模塊註釋必須單獨寫在一行
三、 單行註釋與多行註釋
/* this is a short comment */
單行註釋能夠寫在單獨一行，也能夠寫在行尾，註釋中的每一行長度不超過40個漢字，或者80個英文字符。
/*
* this is comment line 1.
* this is comment line 2.
*/
多行註釋必須寫在單獨行內
四、特殊註釋
/* TODO: xxxx by name 2013-04-13 18:32 */
/* BUGFIX: xxxx by name 2012-04-13 18:32 */
用於標註修改、待辦等信息
五、區塊註釋
/* Header */ /* Footer */ /* Gallery */
對一個代碼區塊註釋（可選），將樣式語句分區塊並在新行中對其註釋。
3、命名規範
使 用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首 選；使用通用名稱表明該元素不表特定意義，與其同級元素無異，一般是用於輔助命名；使用功能性或通用的名稱能夠更適用於文檔或模版變化的狀況。
    •    /* 不推薦: 無心義 */ #yee-1901 {}
    •    /* 不推薦: 與樣式相關 */ .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命名越簡短越好，只要足夠表達涵義。這樣既有助於理解，也能提升代碼效率。
    •    /* 不推薦 */ #navigation {}.atr {}
    •    /* 推薦 */ #nav {}.author {}
類型選擇器避免同時使用標籤、ID和class做爲定位一個元素選擇器；從性能上考慮也應儘可能減小選擇器的層級。
    •    /* 不推薦 */ul#example {}div.error {}
    •    /* 推薦 */#example {}.error {}
命名時須要注意的點：
    1.    規則命名中，一概採用小寫加中劃線的方式，不容許使用大寫字母或 _
    2.    命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合
    3.    命名注意縮寫，可是不能盲目縮寫，具體請參見經常使用的CSS命名規則
    4.    不容許經過一、二、3等序號進行命名
    5.    避免class與id重名
    6.    id用於標識模塊或頁面的某一個父容器區域，名稱必須惟一，不要隨意新建id
    7.    class用於標識某一個類型的對象，命名必須言簡意賅。
    8.    儘量提升代碼模塊的複用，樣式儘可能用組合的方式
    9.    規則名稱中不該該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。應該用意義命名，而不是樣式顯示結果命名。
一、經常使用id的命名：
(1)頁面結構
    •    容器: container
    •    頁頭：header
    •    內容：content/container
    •    頁面主體：main
    •    頁尾：footer
    •    導航：nav
    •    側欄：sidebar
    •    欄目：column
    •    頁面外圍控制總體佈局寬度：wrapper
    •    左右中：left right center
(2)導航
    •    導航：nav
    •    主導航：mainbav
    •    子導航：subnav
    •    頂導航：topnav
    •    邊導航：sidebar
    •    左導航：leftsidebar
    •    右導航：rightsidebar
    •    菜單：menu
    •    子菜單：submenu
    •    標題: title
    •    摘要: summary
(3)功能
    •    標誌：logo
    •    廣告：banner
    •    登錄：login
    •    登陸條：loginbar
    •    註冊：regsiter
    •    搜索：search
    •    功能區：shop
    •    標題：title
    •    加入：joinus
    •    狀態：status
    •    按鈕：btn
    •    滾動：scroll
    •    標籤頁：tab
    •    文章列表：list
    •    提示信息：msg
    •    當前的: current
    •    小技巧：tips
    •    圖標: icon
    •    註釋：note
    •    指南：guild
    •    服務：service
    •    熱點：hot
    •    新聞：news
    •    下載：download
    •    投票：vote
    •    合做夥伴：partner
    •    友情連接：link
    •    版權：copyright
二、經常使用class的命名：
(1)顏色:使用顏色的名稱或者16進制代碼,如
    •    .red { color: red; }
    •    .f60 { color: #f60; }
    •    .ff8600 { color: #ff8600; }
(2)字體大小,直接使用」font+字體大小」做爲名稱,如
    •    .font12px { font-size: 12px; }
    •    .font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
    •    .left { float:left; }
    •    .bottom { float:bottom; }
(4)標題欄樣式,使用」類別+功能」的方式命名,如
    •    .barnews { }
    •    .barproduct { }
4、書寫規範
一、排版規範
(1)使用4個空格，而不使用tab或者混用空格+tab做爲縮進；
(2)規則能夠寫成單行，或者多行，可是整個文件內的規則排版必須統一；
單行形式書寫風格的排版約束
    •    若是是在html中寫內聯的css，則必須寫成單行；
    •    每一條規則的大括號 { 先後加空格 ；
    •    每一條規則結束的大括號 } 前加空格；
    •    屬性名冒號以前不加空格，冒號以後加空格；
    •    每個屬性值後必須添加分號; 而且分號後空格；
    •    多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；
多行形式書寫風格的排版約束
    •    每一條規則的大括號 { 前添加空格;
    •    多個selector共用一個樣式集，則多個selector必須寫成多行形式 ;
    •    每一條規則結束的大括號 } 必須與規則選擇器的第一個字符對齊 ;
    •    屬性名冒號以前不加空格，冒號以後加空格;
    •    屬性值以後添加分號;
二、屬性編寫順序
    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/overflow
    7.    CSS3屬性：transform/transition/animation/box-shadow/border-radius
    8.    若是使用CSS3的屬性，若是有必要加入瀏覽器前綴，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進行添加，標準屬性寫在最後。
    9.    連接的樣式請嚴格按照以下順序添加： a:link -> a:visited -> a:hover -> a:active
三、規則書寫規範
    1.    使用單引號，不容許使用雙引號;
    2.    每一個聲明結束都應該帶一個分號，不論是不是最後一個聲明;
    3.    除16進制顏色和字體設置外，CSS文件中的全部的代碼都應該小寫;
    4.    除了重置瀏覽器默認樣式外，禁止直接爲html tag添加css樣式設置;
    5.    每一條規則應該確保選擇器惟一，禁止直接爲全局.nav/.header/.body等類設置屬性;
四、代碼性能優化
    1.    合併margin、padding、border的-left/-top/-right/-bottom的設置，儘可能使用短名稱。
    2.    選擇器應該在知足功能的基礎上儘可能簡短，減小選擇器嵌套，查詢消耗。可是必定要避免覆蓋全局樣式設置。
    3.    注意選擇器的性能，不要使用低性能的選擇器。
    4.    禁止在css中使用*選擇符。
    5.    除非必須，不然，通常有class或id的，不須要再寫上元素對應的tag。
    6.    0後面不須要單位，好比0px能夠省略成0，0.8px能夠省略成.8px。
    7.    若是是16進製表示顏色，則顏色取值應該大寫。
    8.    若是能夠，顏色儘可能用三位字符表示，例如#AABBCC寫成#ABC 。
    9.    若是沒有邊框時，不要寫成border:0，應該寫成border:none 。
    10.    儘可能避免使用AlphaImageLoader 。
    11.    在保持代碼解耦的前提下，儘可能合併重複的樣式。
    12.    background、font等能夠縮寫的屬性，儘可能使用縮寫形式 。
五、CSS Hack的使用
請不用動不動就使用瀏覽器檢測和CSS Hacks，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差別，但應被視爲最後的手段。在長期的項目中，容許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！
推薦使用下面的：

六、字體規則
    •    爲了防止文件合併及編碼轉換時形成問題，建議將樣式中文字體名字改爲對應的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei，幾個單詞中間有空格組成的必須加引號)
    •    字體粗細採用具體數值，粗體bold寫爲700，正常normal寫爲400
    •    font-size必須以px或pt爲單位，推薦用px（注：pt爲打印版字體大小設置），不容許使用xx-small/x-small/small/medium/large/x-large/xx-large等值
    •    爲了對font-family取值進行統一，更好的支持各個操做系統上各個瀏覽器的兼容性，font-family不容許在業務代碼中隨意設置
5、其餘規範
    •    不要輕易改動全站級CSS和通用CSS庫。改動後，要通過全面測試。
    •    避免使用filter
    •    避免在CSS中使用expression
    •    避免太小的背景圖片平鋪。
    •    儘可能不要在CSS中使用!important
    •    絕對不要在CSS中使用」*」選擇符
    •    層級(z-index)必須清晰明確，頁面彈窗、氣泡爲最高級（最高級爲999），不一樣彈窗氣泡之間可在三位數之間調整；普通區塊爲10-90內10的倍數；區塊展開、彈出爲當前父層級上個位增長，禁止層級間盲目攀比。
    •    背景圖片請儘量使用sprite技術, 減少http請求, 考慮到多人協做開發, sprite按照模塊、業務、頁面來劃分都可。
6、測試規範
一、瞭解瀏覽器特效支持

爲了頁面性能考慮，若是瀏覽器不支持CSS3相關屬性的，則該瀏覽器的某些特效將再也不支持，屬性的支持狀況以下表所示（Y爲支持，N爲不支持）：

二、 設定瀏覽器支持標準



    •    A級－交互和視覺徹底符全設計的要求
    •    B級－視覺上容許有所差別，但不破壞頁面的總體效果
    •    C級－可忽略設計上的細節，但不防礙使用
三、經常使用樣式測試工具
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://ued.lanrentuku.com/wd/css-guifan-qianduan.html