常用div+CSS的命名規範

我們開發CSS+DIV網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，

特别是新手不知道什麼地方該如何命名，怎樣命名才是好的方法。

一、命名規則說明：   -   TOP

1）、所有的命名最好都小寫

2）、屬性的值一定要用雙引号("")括起來，且一定要有值如class="divcss5",id="divcss5"

3）、每個标簽都要有開始和結束，且要有正确的層次，排版有規律工整

4）、空元素要有結束的tag或于開始的tag後加上"/"

5）、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定義，應遵循從大到小的原則，展現文檔的結構，并有利于搜尋引擎的查詢。

7）、給每一個表格和表單加上一個唯一的、結構标記id

8）、給圖檔加上alt标簽

9）、盡量使用英文命名原則

10）、盡量不縮寫，除非一看就明白的單詞

DIVCSS5給大家介紹常見CSS命名和DIV CSS命名方法。

二、相對網頁外層重要部分CSS樣式命名：  -   TOP

外套 wrap ------------------用于最外層

頭部 header ----------------用于頭部

主要内容 main ------------用于主體内容（中部）

左側 main-left -------------左側布局

右側 main-right -----------右側布局

導覽列 nav -----------------網頁菜單導覽列

内容 content ---------------用于網頁中部主體

底部 footer -----------------用于底部

三、DIV+CSS命名參考表：   -   TOP

以下為CSS樣式命名與CSS檔案命名參考，DIV CSS命名集合：

CSS樣式命名         說明

網頁公共命名

#wrapper----------------- 頁面外圍控制整體布局寬度

#container或#content -----------------        容器,用于最外層

#layout -----------------        布局

#head, #header -----------------        頁頭部分

#foot, #footer -----------------        頁腳部分

#nav -----------------        主導航

#subnav-----------------         二級導航

#menu -----------------        菜單

#submenu-----------------         子菜單

#sideBar-----------------         側欄

#sidebar_a, #sidebar_b -----------------        左邊欄或右邊欄

#main -----------------        頁面主體

#tag         标簽

#msg #message-----------------         提示資訊

#tips -----------------        小技巧

#vote-----------------         投票

#friendlink         友情連接配接

#title -----------------        标題

#summary-----------------         摘要

#loginbar-----------------         登入條

#searchInput -----------------        搜尋輸入框

#hot -----------------        熱門熱點

#search-----------------         搜尋

#search_output -----------------        搜尋輸出和搜尋結果相似

#searchBar -----------------        搜尋條

#search_results-----------------        搜尋結果

#copyright-----------------         版權資訊

#branding-----------------         商标

#logo-----------------         網站LOGO标志

#siteinfo -----------------        網站資訊

#siteinfoLegal-----------------         法律聲明

#siteinfoCredits-----------------         信譽

#joinus-----------------         加入我們

#partner -----------------        合作夥伴

#service -----------------        服務

#regsiter-----------------         注冊

arr/arrow-----------------         箭頭

#guild -----------------        指南

#sitemap-----------------         網站地圖

#list-----------------         清單

#homepage -----------------        首頁

#subpage -----------------        二級頁面子頁面

#tool, #toolbar -----------------        工具條

#drop-----------------         下拉

#dorpmenu-----------------         下拉菜單

#status-----------------         狀态

#scroll-----------------         滾動

.tab -----------------        标簽頁

.left .right .center-----------------         居左、中、右

.news -----------------        新聞

.download-----------------         下載下傳

.banner -----------------        廣告條(頂部廣告條)

電子貿易相關

.products -----------------        産品

.products_prices-----------------         産品價格

.products_description -----------------        産品描述

.products_review-----------------         産品評論

.editor_review-----------------         編輯評論

.news_release -----------------        最新産品

.publisher -----------------        生産商

.screenshot -----------------        縮略圖

.faqs-----------------         常見問題

.keyword -----------------        關鍵詞

.blog -----------------        部落格

.forum -----------------        論壇

CSS檔案命名         說明

master.css,style.css-----------------         主要的

module.css-----------------         子產品

base.css -----------------        基本共用

layout.css -----------------        布局，版面

themes.css -----------------        主題

columns.css -----------------        專欄

font.css -----------------        文字、字型

forms.css-----------------         表單

mend.css -----------------        更新檔

print.css -----------------        列印

CSS命名其它說明:

DIV+CSS命名小結：無論是使用“.”（小寫句号）選擇符号開頭命名，還是使用“#”(井号)選擇符号開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井号)選擇符号開頭命名，

其它都用“.”（小寫句号）選擇符号開頭命名，同時考慮命名的CSS選擇器在HTML中重複使用調用。

通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導覽列)、menu(菜單)、title(欄目标題、一般配合h1\h2\h3\h4标簽使用)

、content (内容區)、footer(頁腳、底部)、logo（标志、可以配合h1标簽使用）、banner（廣告條，一般在頂部）、copyRight（版權）。其它可根據自己需要選擇性使用。

DIVCSS5建議：主要的、重要的、最外層的盒子用“#”(井号)選擇符号開頭命名，其它都用“.”（小寫句号）選擇符号開頭命名。

2.CSS樣式檔案命名如下

主要的 master.css

布局，版面 layout.css

專欄 columns.css

文字 font.css

列印樣式 print.css

主題 themes.css