您的位置 >>> 星想互聯 >>> 編程技術 >>> HTML+CSS
前端CSS規范整理
點擊數:9994  發布時間2014-11-20 22:57:37

一、文件規范

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 

2、文件引入可通過外聯或內聯方式引入。

  • 外聯方式:(類型聲明type=”text/css”可以省略) 

  • 內聯方式:(類型聲明type=”text/css”可以省略) 

  • link和style標簽都應該放入head中,原則上,不允許在html上直接寫樣式。避免在CSS中使用@import,嵌套不要超過一層。

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

  • 文件名必須由小寫字母、數字、中劃線組成 

  • 文件必須用UTF-8編碼,使用UTF-8(非BOM),在HTML中指定UTF-8編碼,在CSS中則不需要特別指定因為默認就是UTF-8。 

  • 單個CSS文件避免過大(建議少于300行) 

二、注釋規范

1、文件頂部注釋(推薦使用)

/* * @description: 中文說明 * @author: name * @update: name (2013-04-13 18:32) */ 

2、模塊注釋

/* module: module1 by 張三 */ … /* module: module2 by 張三 */ 

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

3、 單行注釋與多行注釋

/* this is a short comment */

單行注釋可以寫在單獨一行,也可以寫在行尾,注釋中的每一行長度不超過40個漢字,或者80個英文字符。

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

多行注釋必須寫在單獨行內

4、特殊注釋

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

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

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

5、區塊注釋

/* Header */ /* Footer */ /* Gallery */ 

對一個代碼區塊注釋(可選),將樣式語句分區塊并在新行中對其注釋。

三、命名規范

使用有意義的或通用的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. 不允許通過1、2、3等序號進行命名 

  5. 避免class與id重名 

  6. id用于標識模塊或頁面的某一個父容器區域,名稱必須唯一,不要隨意新建id 

  7. class用于標識某一個類型的對象,命名必須言簡意賅。 

  8. 盡可能提高代碼模塊的復用,樣式盡量用組合的方式 

  9. 規則名稱中不應該包含顏色(red/blue)、定位(left/right)等與具體顯示效果相關的信息。應該用意義命名,而不是樣式顯示結果命名。 

1、常用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 

2、常用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 { } 

四、書寫規范

1、排版規范

(1)使用4個空格,而不使用tab或者混用空格+tab作為縮進;

(2)規則可以寫成單行,或者多行,但是整個文件內的規則排版必須統一;

單行形式書寫風格的排版約束

  • 如果是在html中寫內聯的css,則必須寫成單行; 

  • 每一條規則的大括號 { 前后加空格 ; 

  • 每一條規則結束的大括號 } 前加空格; 

  • 屬性名冒號之前不加空格,冒號之后加空格; 

  • 每一個屬性值后必須添加分號; 并且分號后空格; 

  • 多個selector共用一個樣式集,則多個selector必須寫成多行形式 ; 

多行形式書寫風格的排版約束

  • 每一條規則的大括號 { 前添加空格; 

  • 多個selector共用一個樣式集,則多個selector必須寫成多行形式 ; 

  • 每一條規則結束的大括號 } 必須與規則選擇器的第一個字符對齊 ; 

  • 屬性名冒號之前不加空格,冒號之后加空格; 

  • 屬性值之后添加分號; 

2、屬性編寫順序

  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 

3、規則書寫規范

  1. 使用單引號,不允許使用雙引號; 

  2. 每個聲明結束都應該帶一個分號,不管是不是最后一個聲明; 

  3. 除16進制顏色和字體設置外,CSS文件中的所有的代碼都應該小寫; 

  4. 除了重置瀏覽器默認樣式外,禁止直接為html tag添加css樣式設置; 

  5. 每一條規則應該確保選擇器唯一,禁止直接為全局.nav/.header/.body等類設置屬性; 

4、代碼性能優化

  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等可以縮寫的屬性,盡量使用縮寫形式 。 

5、CSS Hack的使用

請不用動不動就使用瀏覽器檢測和CSS Hacks,先試試別的解決方法吧!考慮到代碼高效率和易管理,雖然這兩種方法能快速解決瀏覽器解析差異,但應被視為最后的手段。在長期的項目中,允許使用hack只會帶來更多的hack,你越是使用它,你越是會依賴它!

推薦使用下面的:

css-hack

6、字體規則

  • 為了防止文件合并及編碼轉換時造成問題,建議將樣式中文字體名字改成對應的英文名字,如:黑體(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不允許在業務代碼中隨意設置 

五、其他規范

  • 不要輕易改動全站級CSS和通用CSS庫。改動后,要經過全面測試。 

  • 避免使用filter 

  • 避免在CSS中使用expression 

  • 避免過小的背景圖片平鋪。 

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

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

  • 層級(z-index)必須清晰明確,頁面彈窗、氣泡為最高級(最高級為999),不同彈窗氣泡之間可在三位數之間調整;普通區塊為10-90內10的倍數;區塊展開、彈出為當前父層級上個位增加,禁止層級間盲目攀比。 

  • 背景圖片請盡可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按照模塊、業務、頁面來劃分均可。 

六、測試規范

1、了解瀏覽器特效支持

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

brower

2、 設定瀏覽器支持標準

abc

  • A級-交互和視覺完全符全設計的要求 

  • B級-視覺上允許有所差異,但不破壞頁面的整體效果 

  • C級-可忽略設計上的細節,但不防礙使用 

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/

來源:星想互聯
日本高清成 人,A级高清毛片av无码,欧美成 人 免费在线播放-首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>