CSS書寫規範和順序?

一直以來,書寫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等

CSS書寫規範和順序

二、一些注意事項:

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;

CSS書寫規範和順序

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

相關問題答案