代碼書寫規範這種東西雖然不是必須的但是确實很有必要的好的書寫規範不單單能增加可閱讀性和提高代碼性能而且有利于後續人員維護代碼。良好的書寫規範也是區分新手與專業人員的一個标準。
一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縮寫屬性
css有很多屬性是可以進行縮寫的比如padding與margin、font等這樣既精簡代碼又提高了可閱讀性。
機關也可以将小數點前的0去掉如0.8em變成.8em
16進制顔色代碼縮寫有些顔色代碼是可以縮寫的應該要盡量縮寫。
三、連字元css選擇器命名規範
1、詞組命名應該用“-”橫線來為選擇器命名
2、不建議使用“_”下劃線來命名CSS選擇器因為輸入的時候少按一個shift鍵浏覽器相容問題比如使用_tips的選擇器命名在IE6是無效的雖然現在應該沒有人用IE6了。能良好區分JavaScript變量命名js變量用_ 比較多
3、id應該按需使用不能濫用
四、幫選擇器添加狀态字首
給選擇器添加一個表示狀态的字首讓語義更明了
五、CSS命名規範(規則)常用的CSS命名規則
頭header 内容cntent/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
注釋的寫法:
内容區
Id的命名:
1)頁面結構 容器: container
頁頭header 内容content/container 頁面主體main 頁尾footer 導航nav 側欄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 功能區shop 标題title 加入joinus 狀态status 按鈕btn 滾動scroll 标籤頁tab 文章清單list 提示資訊msg 目前的: current 小技巧tips 圖示: icon 注釋note 指南guild 服務service 熱點hot 新聞news 下載下傳download 投票vote 合作夥伴partner 友情連結link 版權copyright
注意事項::
1.一律小寫; 2.盡量用英文; 3.不加中槓和下劃線; 4.盡量不縮寫除非一看就明白的單詞。
CSS樣式表檔案命名 主要的 master.css 子產品 module.css 基本共用 base.css 布局、版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 更新檔 mend.css 列印 print.css