CSS書寫
1書寫的順序
1.1位置屬性(position, top, right, z-index,display, float等)
1.2大小(width, height, padding, margin)
1.3文字系列(font, line-height, letter-spacing, color-text-align等)
1.4.背景(background, border等)
1.5其他(animation, transition等)
2.CSS書寫規範
2.1 使用CSS縮寫屬性
CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡程式碼同時又能提高使用者的閱讀體驗。
2.2 去掉小數點前的“0”
2.3 簡寫命名
很多使用者都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!
2.4 16進位制顏色程式碼縮寫
有些顏色程式碼是可以縮寫的,我們就儘量縮寫吧,提高使用者體驗為主。
2.5 連字元CSS選擇器命名規範
2.5.1長名稱或片語可以使用中橫線來為選擇器命名。
2.5.2不建議使用“_”下劃線來命名CSS選擇器
id在JavaScript中是唯一的,不能多次使用,而使用class類選擇器卻可以重複使用。
7.常用的CSS命名規則
頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登入條:loginbar
標誌:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
選單:menu
子選單:submenu
搜尋:search
友情連結:friendlink
頁尾:footer
版權:copyright
滾動:scroll
內容:content
標籤:tags
文章列表:list
提示資訊:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guide
服務:service
註冊:regsiter
狀態:status
投票:vote
合作伙伴:partner
8註釋的寫法:
/* Header */
8.1內容區
/* End Header */
8.2 頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
8.2.1導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
選單:menu
子選單:submenu
標題: title
摘要: summary
8.2.2功能
標誌:logo
廣告:banner
登陸:login
登入條:loginbar
註冊:register
搜尋:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示資訊:msg
當前的: current
小技巧:tips
圖示: icon
註釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情連結:link
版權:copyright
9、注意事項:
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫,除非一看就明白的單詞。
10、CSS樣式表文件命名
主要的 master.css
模組 module.css
基本共用 base.css
佈局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css