一直以來,書寫css都是率性所為,沒有遵循一定的規範;俗話說:沒有規矩,不成方圓。造成了程式碼可讀性極差,導致了網站後期維護非常困難。
方法/步驟
萬事都有一個順序,先幹什麼,後幹什麼。那麼css書寫的順序是什麼呢?
一、書寫順序:
1、定位:其中有的屬性為:position z-index left right top bottom clip
2、尺寸:其中屬性為:width height min-height max-height min-width
max-width
3、文字:其中屬性有:color font-size letter-spacing, color- text-align等
4、背景:其中屬性有:background-image border等
5、其他:一般有:animation, transition等
二、一些注意事項:
1、能縮寫的儘量縮寫;
例如:background-color:#333;background-image: url(skin/p_103x196_1.jpg); background-repeat: repeat-x;
可以書寫為:background:url(skin/p_103x196_1.jpg) repeat-x #333;
2、能少些儘量少寫:
例如:font-size:0.9em 可以寫為:font-size:.9em;
3、灰度值可以縮寫的縮寫:
例如:color:#666666;可以寫為:color:#666;
4、在別人閱讀程式碼可以看得多的情況下縮寫:
例如:navigation 可以寫為 nav
5、不建議使用“_”下劃線來命名CSS選擇器,因為:
(1)、輸入的時候少按一個shift鍵;
(2)、瀏覽器相容問題 (比如使用_tips的選擇器命名,在IE6是無效的)
(3)、能良好區分JavaScript變數命名(JS變數命名是用“_”)
二、CSS命名規範(常用的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
三、css檔案中註釋的寫法:
註釋的寫法:
/* Header */
內容區
/* End Header */
ID的命名:
頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
CSS樣式表文件命名:
主要的 master.css
模組 module.css
基本共用 base.css
版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css