div和css命名規範推薦介紹

如果單純的使用div css實現網頁的佈局美化功能是不夠的。

還需要兼顧文件的可讀性，如果後期要維護，或者說方便供其他程式設計師閱讀程式碼。

下面就介紹一下在世紀編碼中比較推薦的命名方式，有需要的朋友可以做一下參考。

一.基本命名規則:

（1）.所有命名推薦都是小寫形式。

（2）.屬性要用雙引號包裹。

（3）.標籤要有開始和結束標籤，這樣排版規則，當然非閉合的除外。

（4）.表現與結構分離，也就是標籤內儘量不要使用樣式相關定義，比如style、font或者border等的使用。

（5）.定義要體現從大到小的原則，以方便閱讀和搜尋引擎查詢。

（6）.img標籤最好要使用alt屬性。

（7）.命名最好用英文。

二.結構層次推薦命名規則:

（1）.#wrapper:頁面外圍控制整體佈局寬度。

（2）.#container或#content:容器，用於最外層。

（3）.#layout:佈局。

（4）.#head,#header:頁頭部分。

（5）.#foot,#footer:頁尾部分。

（6）.#nav:主導航。

（7）.#subnav:二級導航。

（8）.#menu:選單。

（9）.#submenu:子選單。

（10）.#sideBar:側欄。

（11）.#sidebar_a,#sidebar_b:右邊欄或者左邊欄。

（12）.#main:頁面主體。

（13）.#tag:標籤。

（14）.#msg#message:提示資訊。

（15）.#tips:小技巧。

（16）.#vote:投票。

（17）.#friendlink:友情連結。

（18）.#title:標題。

（19）.#summary:摘要。

（20）.#loginbar:登陸條。

（21）.#searchInput:搜尋輸入框。

（22）.#hot:熱門。

（23）.#search:搜尋框。

（24）.#search_output:搜尋輸出和相似結果。

（25）.#searchBar:搜尋條。

（26）.#search_results:搜尋結果。

（27）.#copyright:版權資訊。

（28）.#branding:商標。

（29）.#logo:logo。

（30）.#siteinfo:網站資訊。

（31）.#siteinfoLegal:法律宣告。

（32）.#siteinfoCredits:信譽。

（33）.#joinus:加入我們。

（34）.#partner:合作伙伴。

（35）.#service:服務。

（36）.#regsiter:註冊。

（37）.arr/arrow:箭頭。

（38）.#guild:指南。

（39）.#sitemap:網站地圖。

（40）.#list:列表。

（41）.#homepage:首頁。

（42）.#subpage:二級頁面子頁面。

（43）.#tool,#toolbar:工具條。

（44）.#drop:下拉。

（45）.#dorpmenu:下拉選單。

（46）.#status:狀態。

（47）.#scroll:滾動條。

（48）.#banner:廣告條。

（49）.products:產品

（50）.products_prices:產品價格。

（51）.products_description:產品描述。

（52）.products_review:產品評論。

（53）.editor_review:編輯評論。

（54）.news_release:最新產品。

（55）.publisher:生產商。

（56）.screenshot:縮圖。

（57）.faqs:常見問題。

（58）.keyword:關鍵詞

三.CSS檔案命名推薦:

（1）.master.css,style.css:主要css檔案。

（2）.module.css:模組css檔案。

（3）.base.css:基本通用css檔案。

（4）.layout.css:佈局版面css檔案。

（5）.themes.css:主題css檔案。

（6）.columns.css:專欄css檔案。

（7）.font.css:文字字型css檔案。

（8）.forms.css:表單相關css檔案。

（9）.mend.css:補丁css檔案。

（10）.print.css:列印css檔案。