【命名規(guī)范 學(xué)習(xí)和優(yōu)化】

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

一、文件規(guī)范1到腥、文件均歸檔至約定的目錄中深寥。具體要求通過豆瓣的CSS規(guī)范進(jìn)行講解:所有的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

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

四长捧、書寫規(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,你越是使用它拜银,你越是會依賴它!
推薦使用下面的:
[圖片上傳中钱豁。疯汁。。(1)]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)屬性的,則該瀏覽器的某些特效將不再支持侈玄,屬性的支持情況如下表所示(Y為支持,N為不支持)
[圖片上傳中突颊。。爬橡。(2)]2棒动、 設(shè)定瀏覽器支持標(biāo)準(zhǔn)[圖片上傳中。船惨。粱锐。(3)]
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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市奥裸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌樟氢,老刑警劉巖侠鳄,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伟恶,死亡現(xiàn)場離奇詭異,居然都是意外死亡博秫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門巴碗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來橡淆,“玉大人,你說我怎么就攤上這事逸爵。” “怎么了抵蚊?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵溯革,是天一觀的道長致稀。 經(jīng)常有香客問我俱尼,道長,這世上最難降的妖魔是什么遇八? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任刃永,我火速辦了婚禮,結(jié)果婚禮上斯够,老公的妹妹穿的比我還像新娘读规。我一直安慰自己,他們只是感情好束亏,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布碍遍。 她就那樣靜靜地躺著,像睡著了一般怕敬。 火紅的嫁衣襯著肌膚如雪赖捌。 梳的紋絲不亂的頭發(fā)上矮烹,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天罩锐,我揣著相機(jī)與錄音,去河邊找鬼仁期。 笑死竭恬,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痊硕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼盒揉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起羡洛,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤藕漱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谴分,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡忘伞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年氓奈,在試婚紗的時候發(fā)現(xiàn)自己被綠了鼎天。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡育勺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出涧至,到底是詐尸還是另有隱情,我是刑警寧澤纺非,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布赘方,位于F島的核電站,受9級特大地震影響炕淮,放射性物質(zhì)發(fā)生泄漏泳梆。R本人自食惡果不足惜榜掌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一憎账、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧胞皱,春花似錦、人聲如沸雾鬼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽又憨。三九已至锭吨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間零如,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工耸携, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人夺衍。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓沟沙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親矛紫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)喳篇,斷路器,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 文章整理了Web前端開發(fā)中的各種CSS規(guī)范挺尿,包括文件規(guī)范炊邦、注釋規(guī)范、命名規(guī)范窄俏、書寫規(guī)范碘菜、測試規(guī)范等。 一炉媒、文件規(guī)范...
    二狗子沒有夏天閱讀 1,853評論 0 35
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評論 25 707
  • 有一天吊骤,我接女兒放學(xué),那天下著毛毛細(xì)雨白粉,我上去樓上教室接她鼠渺,看到她還在寫作業(yè)眷细,不打擾她,在外面耐心等待普舆。等了一會兒...
    羅瑛敦閱讀 332評論 0 2
  • 跟著書做的漸變練習(xí)校读。既然基礎(chǔ)差,就從基礎(chǔ)下手吧^_^
    晴空霽月閱讀 208評論 0 0