一、命名規則說明

1. 所有的命名最好都小寫
2. 屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"
3. 每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
4. 空元素要有結束的tag或於開始的tag後加上"/"
5. 表現與結構完全分離，程式碼中不涉及任何的表現元素，如style、font、bgColor、border等

6. 到

   的定義，應遵循從大到小的原則，體現文件的結構，並有利於搜尋引擎的查詢。

7. 給每一個表格和表單加上一個唯一的、結構標記id
8. 給圖片加上alt標籤
9. 儘量使用英文命名原則
10. 儘量不縮寫，除非一看就明白的單詞

1、DIV+CSS命名小結

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

通常我們最常用主要命名有：wrap（外套、最外層）、header（頁首、頭部）、nav(導航條)、menu(選單)、title(欄目標題、一般配合h1\h2\h3\h4標籤使用)
、content
(內容區)、footer(頁尾、底部)、logo（標誌、可以配合h1標籤使用）、banner（廣告條，一般在頂部）、copyRight（版權）。其它可根據自己需要選擇性使用。

二、內容命名參考

1、頁面結構類

• 面板 ： dashboard
• 容器 ： container
• 頁頭 ： header
• 內容 ： content
• 外圍控制 ： wrapper
• 頁面主體 ： main
• 欄目 ： column
• 寬欄目 ： wide_column
• 窄欄目 ： narrow_column
• 欄 ： bar
• 側邊欄 ： sidebar
• 網站地圖 ： sitemap
• 頁尾 ： footer
• 標籤頁 ：.tab
• 居左、中、右 ：.left .right .center

2、導航類

• 主導航 ： nav_main
• 子導航 ： nav_child,subnav
• 三級導航 ： nav_third
• 導航 ： nav
• 頂導航 ： nav_top
• 左導航 ： nav_left
• 右導航 ： nav_right
• 選單 ： menu
• 子選單 ： menu_child
• 下拉選單 ： menu_drop
• 位置導航 ： crumb
• 麵包屑 ： breadcrumb
• 標題: title
• 摘要: summary

3、表單

• 郵件 ： mail
• 使用者名稱 ： username
• 密碼 ： passwd
• 重複密碼 ： passwd_again
• 儲存資訊 ： cookie
• 性別 ： sex
• 地點 ： local
• 下拉 ： drop
• 驗證碼 ： verification
• 按鈕 ： btn
• 必填項 ： requisite
• 狀態 ： status

4、功能模組

• 登入 ：
  login

• 註冊 ： regsiter

• 搜尋 ： search

• 標籤頁 ： tab

• 工具條 ： toolbar

• 標籤頁 ： tab

• 日曆 ： calendar

• 分類 ： category

• 歸檔 ： archive

• 回覆 ： comment

• 標籤 ： tag

• 投票 ： vote

• 合作伙伴 ： partner

• 友情連結 ： friendlink

• 新聞 ： news

• 下載 ： download

• 指南 ： guild

• 幫助 ： help

• 常見問題 ： faq

• 服務 ： service

5、內容

• 註釋 ： note
• 條目 ： entry
• 摘要 ： summary
• 縮圖 ： screenshot
• 提示資訊 ： msg
• 小技巧 ： tips
• 正方形的 ： Square
• 極小的 ： Thumbnail
• 小的 ： Small
• 中等的 ： Medium
• 大的 ： Large
• 原始的 ： Original

6、動作

• 滾動 ： scroll
• 箭頭 ： arrow
• 首頁 ： first
• 上一頁 ： prev
• 下一頁 ： next
• 末頁 ： last
• 更早的 ： older
• 更新的 ： newer

7、狀態

• 列表 ： list
• 熱點 ： hot
• 更新 ： new
• 前十列表 ： topten_list
• 相關列表 ： related_list
• 更新列表 ： update_list

三、CSS樣式檔案命名

• 基本共用，全域性樣式表 ： base.css
• 主要的 ： master.css, style.css, main.css
• 佈局，版面 ： layout.css
• 專欄 ： columns.css
• 文字 ： font.css
• 列印 ： print.css
• 主題 ： themes.css
• 附加 ： attach.css
• 模組 ： module.css
• 表單 ： forms.css
• 補丁 ： mend.css

四、CSS樣式的書寫順序

按照以下1 2 3 4 5的順序進行書寫。

目的：減少瀏覽器reflow（迴流），提升瀏覽器渲染dom的效能

1. 定位屬性（位置屬性）：position display float clear top right bottom left overflow z-index
2. 自身屬性（盒子屬性）： margin padding border width height background box-sizing outline
3. 文字樣式：font-family font-size font-style font-weight font-varient color
4. 文字屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5. 其他屬性（CSS3 屬性）：content cursor border-radius box-shadow text-shadow background transform……