參考網(wǎng)址:http://www.shejidaren.com/css-written-specifications.html
CSS書寫順序:
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS書寫規(guī)范:
常用的CSS命名規(guī)則
使用CSS縮寫屬性
CSS有些屬性是可以縮寫的丸相,比如padding,margin,font等等藕届,這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數(shù)點前的“0”
簡寫命名
很多用戶都喜歡簡寫類名浓镜,但前提是要讓人看懂你的命名才能簡寫哦目木!
16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的换途,我們就盡量縮寫吧,提高用戶體驗為主刽射。
連字符CSS選擇器命名規(guī)范
1.長名稱或詞組可以使用中橫線來為選擇器命名军拟。
2.不建議使用“_”下劃線來命名CSS選擇器,為什么呢誓禁?
輸入的時候少按一個shift鍵懈息;
瀏覽器兼容問題 (比如使用tips的選擇器命名,在IE6是無效的)
能良好區(qū)分JavaScript變量命名(JS變量命名是用“”)
這里有一篇破折號與下劃線的詳細討論
頭:header
內(nèi)容:content/container
尾:footer
導航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標志:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權(quán):copyright
滾動:scroll
內(nèi)容:content
標簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guide
服務:service
注冊:regsiter
狀態(tài):status
投票:vote
合作伙伴:partner
注釋的寫法:
/* Header /
內(nèi)容區(qū)
/ End Header */
Id的命名:
1)頁面結(jié)構(gòu)
容器: container
頁頭:header
內(nèi)容:content/container
頁面主體:main
頁尾:footer
導航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
(2)導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3)功能
標志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區(qū):shop
標題:title
加入:joinus
狀態(tài):status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權(quán):copyright