1. 程式人生 > >CSS書寫

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選擇器

6.不要隨意使用id
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