一、命名規則說明
- 所有的命名最好都小寫
- 屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"
- 每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整
- 空元素要有結束的tag或於開始的tag后加上"/"
- 表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
- <h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢。
- 給每一個表格和表單加上一個唯一的、結構標記id
- 給圖片加上alt標簽
- 盡量使用英文命名原則
- 盡量不縮寫，除非一看就明白的單詞
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的性能
- 定位屬性（位置屬性）：position display float clear top right bottom left overflow z-index
- 自身屬性（盒子屬性）： margin padding border width height background box-sizing outline
- 文字樣式：font-family font-size font-style font-weight font-varient color
- 文本屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
- 其他屬性（CSS3 屬性）：content cursor border-radius box-shadow text-shadow background transform……