DIV+CSS規范命名集合
我們開發CSS+DIV網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。
命名規則說明：
1）、所有的命名最好都小寫
2）、屬性的值一定要用雙引號(“”)括起來，且一定要有值如class=”divcss5″,id=”divcss5″
3）、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整
4）、空元素要有結束的tag或于開始的tag后加上”/”
5）、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
6）、定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。
7）、給每一個表格和表單加上一個唯一的、結構標記id
8）、給圖片加上alt標簽
9）、盡量使用英文命名原則
10）、盡量不縮寫，除非一看就明白的單詞
相對網頁外層重要部分CSS樣式命名：
外套wrap——————用于最外層頭部header—————-用于頭部主要內容main————用于主體內容（中部）左側main-left ————-左側布局右側main-right———–右側布局導航條nav—————–網頁菜單導航條內容content—————用于網頁中部主體底部 footer—————–用于底部
DIV+CSS命名參考表：
以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：
CSS樣式命名</td> |
說明</td> </tr> | |||||||||||||||||||||||||||
| 網頁公共命名 | </tr>||||||||||||||||||||||||||||
| #wrapper | 頁面外圍控制整體布局寬度 | </tr>|||||||||||||||||||||||||||
| #container或#content | 容器,用于最外層 | </tr>|||||||||||||||||||||||||||
| #layout | 布局 | </tr>|||||||||||||||||||||||||||
| #head,#header | 頁頭部分 | </tr>|||||||||||||||||||||||||||
| #foot,#footer | 頁腳部分 | </tr>|||||||||||||||||||||||||||
| #nav | 主導航 | </tr>|||||||||||||||||||||||||||
| #subnav | 二級導航 | </tr>|||||||||||||||||||||||||||
| #menu | 菜單 | </tr>|||||||||||||||||||||||||||
| #submenu | 子菜單 | </tr>|||||||||||||||||||||||||||
| #sideBar | 側欄 | </tr>|||||||||||||||||||||||||||
| #sidebar_a,#sidebar_b | 左邊欄或右邊欄 | </tr>|||||||||||||||||||||||||||
| #main | 頁面主體 | </tr>|||||||||||||||||||||||||||
| #tag | 標簽 | </tr>|||||||||||||||||||||||||||
| #msg#message | 提示信息 | </tr>|||||||||||||||||||||||||||
| #tips | 小技巧 | </tr>|||||||||||||||||||||||||||
| #vote | 投票 | </tr>|||||||||||||||||||||||||||
| #friendlink | 友情連接 | </tr>|||||||||||||||||||||||||||
| #title | 標題 | </tr>|||||||||||||||||||||||||||
| #summary | 摘要 | </tr>|||||||||||||||||||||||||||
| #loginbar | 登錄條 | </tr>|||||||||||||||||||||||||||
| #searchInput | 搜索輸入框 | </tr>|||||||||||||||||||||||||||
| #hot | 熱門熱點 | </tr>|||||||||||||||||||||||||||
| #search | 搜索 | </tr>|||||||||||||||||||||||||||
| #search_output | 搜索輸出和搜索結果相似 | </tr>|||||||||||||||||||||||||||
| #searchBar | 搜索條 | </tr>|||||||||||||||||||||||||||
| #search_results | 搜索結果 | </tr>|||||||||||||||||||||||||||
| #copyright | 版權信息 | </tr>|||||||||||||||||||||||||||
| #branding | 商標 | </tr>|||||||||||||||||||||||||||
| #logo | 網站LOGO標志 | </tr>|||||||||||||||||||||||||||
| #siteinfo | 網站信息 | </tr>|||||||||||||||||||||||||||
| #siteinfoLegal | 法律聲明 | </tr>|||||||||||||||||||||||||||
| #siteinfoCredits | 信譽 | </tr>|||||||||||||||||||||||||||
| #joinus | 加入我們 | </tr>|||||||||||||||||||||||||||
| #partner | 合作伙伴 | </tr>|||||||||||||||||||||||||||
| #service | 服務 | </tr>|||||||||||||||||||||||||||
| #regsiter | 注冊 | </tr>|||||||||||||||||||||||||||
| arr/arrow | 箭頭 | </tr>|||||||||||||||||||||||||||
| #guild | 指南 | </tr>|||||||||||||||||||||||||||
| #sitemap | 網站地圖 | </tr>|||||||||||||||||||||||||||
| #list | 列表 | </tr>|||||||||||||||||||||||||||
| #homepage | 首頁 | </tr>|||||||||||||||||||||||||||
| #subpage | 二級頁面子頁面 | </tr>|||||||||||||||||||||||||||
| #tool,#toolbar | 工具條 | </tr>|||||||||||||||||||||||||||
| #drop | 下拉 | </tr>|||||||||||||||||||||||||||
| #dorpmenu | 下拉菜單 | </tr>|||||||||||||||||||||||||||
| #status | 狀態 | </tr>|||||||||||||||||||||||||||
| #scroll | 滾動 | </tr>|||||||||||||||||||||||||||
| .tab | 標簽頁 | </tr>|||||||||||||||||||||||||||
| .left.right.center | 居左、中、右 | </tr>|||||||||||||||||||||||||||
| .news | 新聞 | </tr>|||||||||||||||||||||||||||
| .download | 下載 | </tr>|||||||||||||||||||||||||||
| .banner | 廣告條(頂部廣告條) | </tr>|||||||||||||||||||||||||||
| 電子貿易相關 | </tr>||||||||||||||||||||||||||||
| .products | 產品 | </tr>|||||||||||||||||||||||||||
| .products_prices | 產品價格 | </tr>|||||||||||||||||||||||||||
| .products_description | 產品描述 | </tr>|||||||||||||||||||||||||||
| .products_review | 產品評論 | </tr>|||||||||||||||||||||||||||
| .editor_review | 編輯評論 | </tr>|||||||||||||||||||||||||||
| .news_release | 最新產品 | </tr>|||||||||||||||||||||||||||
| .publisher | 生產商 | </tr>|||||||||||||||||||||||||||
| .screenshot | 縮略圖 | </tr>|||||||||||||||||||||||||||
| .faqs | 常見問題 | </tr>|||||||||||||||||||||||||||
| .keyword | 關鍵詞 | </tr>|||||||||||||||||||||||||||
| .blog | 博客 | </tr>|||||||||||||||||||||||||||
| .forum | 論壇 | </tr>|||||||||||||||||||||||||||
| CSS文件命名 | 說明 | </tr>|||||||||||||||||||||||||||
| master.css,style.css | 主要的 | </tr>|||||||||||||||||||||||||||
| module.css | 模塊 | </tr>|||||||||||||||||||||||||||
| base.css | 基本共用 | </tr>|||||||||||||||||||||||||||
| layout.css | 布局，版面 | </tr>|||||||||||||||||||||||||||
| themes.css | 主題 | </tr>|||||||||||||||||||||||||||
| columns.css | 專欄 | </tr>|||||||||||||||||||||||||||
| font.css | 文字、字體 | </tr>|||||||||||||||||||||||||||
| forms.css | 表單 | </tr>|||||||||||||||||||||||||||
| mend.css | 補丁 | </tr>|||||||||||||||||||||||||||
| print.css | 打印 | </tr> </tbody> </table>|||||||||||||||||||||||||||